Div垂直居中
近来我尝试网上了很都多的办法。但都有缺陷。
以下跟大家分享下。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="author" content="Chomo" /> <link rel="start" href="http://www.14px.com" title="Home" /> <title>根据内容宽度、高度自适应,垂直水平居中,内容高度超过窗体时,垂直居顶</title> <style type="text/css"> * { margin:0; padding:0; list-style:none; font-size:14px;}/*---该css reset仅用于demo,请自行换成适合您自己的css reset---*/ html { height:100%;} body { height:100%; text-align:center;} .centerDiv { display:inline-block; zoom:1; *display:inline; vertical-align:middle; text-align:left; width:200px; padding:10px; border:1px solid #f60; background:#fc0;} .hiddenDiv { height:100%; overflow:hidden; display:inline-block; width:1px; overflow:hidden; margin-left:-1px; zoom:1; *display:inline; *margin-top:-1px; _margin-top:0; vertical-align:middle;} </style> </head> <body> <div class="centerDiv"> 蓝色理想<br/> 蓝色理想<br/> 蓝色理想<br/> 蓝色理想<br/> 蓝色理想<br/> 蓝色理想<br/> 蓝色理想<br/> </div><div class="hiddenDiv"></div> </body> </html>
相关推荐
/*垂直居中,div上边界距离窗口上边的距离为窗口高度的50%,并针对不同浏览器进行兼容。-- 在外层添加一个div,把行内容居中,添加.row .justify-content-center -->
Phoebe的学习天地 2020-04-14
STPace 2020-02-17
Simagle 2015-05-27
Dorissun 2016-09-22
ThikHome 2015-05-27
impress 2019-07-01
linfei0 2015-02-01
AnyBisks 2013-07-02
云端漂移 2013-03-20
CoderChang 2012-11-20
统一开发环境UDE 2012-08-31
teresalxm 2011-08-16
xtuhcy 2011-05-11
tivon仔 2010-09-10
Ladyseven 2010-09-07
林一天 2010-09-01
Ladyseven 2010-08-31