CSS垂直水平居中方法整理

CSS定位中常常用到垂直居中,比如覆盖层上的弹框。

兼容性比较好的方法:

<!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>
<style type="text/css">
#box
{
width:200px;
height:100px;
text-align:center;
position: absolute;
left: 50%;
top: 50%;
margin-top: -50px; /* 高度的一半 */
margin-left: -100px; /* 宽度的一半 */
background-color:#ffff99;
}
</style>
</head>
<body>
<div id="box">Hello World!</div>
</body>
</html>

这个方法只适用于已知宽高的块,因为要设置负边距来修正。
如果是未知尺寸的块,可以使用以下方法:

<!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>
<style type="text/css">
#box
{
width:200px;
height:100px;
text-align:center;
position: absolute;
left: 0;
top: 0;
right:0;
bottom:0;
margin:auto;
background-color:#ffff99;
}
</style>
</head>
<body>
<div id="box">Hello World!</div>
</body>
</html>

原因是,绝对定位的布局取决于三个因素,一个是元素的位置,一个是元素的尺寸,一个是元素的margin值。没有设置尺寸和 margin 的元素会自适应剩余空间,位置固定则分配尺寸,尺寸固定边会分配 margin,都是自适应的。

IE7- 的渲染方式不同,渲染规则也不一样,他不会让定位元素去自适应。

现在有了CSS3,就又有新招数了:

<!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>
<style type="text/css">
#box
{
width:200px;
height:100px;
text-align:center;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background-color:#ffff99;
}
</style>
</head>
<body>
<div id="box">Hello World!</div>
</body>
</html>

就是使用transform代替margin. transformtranslate偏移的百分比值是相对于自身大小的,和第一个方法思路类似。

也可以使用FlexBox实现:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>Centering an Element on the Page</title>
<style type="text/css">
html {
height: 100%;
} body {
display: -webkit-box; /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
display: -moz-box; /* 老版本语法: Firefox (buggy) */
display: -ms-flexbox; /* 混合版本语法: IE 10 */
display: -webkit-flex; /* 新版本语法: Chrome 21+ */
display: flex; /* 新版本语法: Opera 12.1, Firefox 22+ */ /*垂直居中*/
/*老版本语法*/
-webkit-box-align: center;
-moz-box-align: center;
/*混合版本语法*/
-ms-flex-align: center;
/*新版本语法*/
-webkit-align-items: center;
align-items: center; /*水平居中*/
/*老版本语法*/
-webkit-box-pack: center;
-moz-box-pack: center;
/*混合版本语法*/
-ms-flex-pack: center;
/*新版本语法*/
-webkit-justify-content: center;
justify-content: center; margin: 0;
height: 100%;
width: 100% /* needed for Firefox */
}
/*实现文本垂直居中*/
h1 {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex; -webkit-box-align: center;
-moz-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
height: 10rem;
} </style>
</head>
<body>
<h1>OMG, I’m centered</h1>
</body>
</html>
上一篇:sql 基本操作


下一篇:【原创】公司各个阶段 CTO 需要做什么?(下篇)