垂直居中是我们在使用css做页面时常见的需求，以下列举几种垂直居中的实现方法：
1. 使用父元素内边距设置实现居中
对如下代码中的父元素设置上下相等的padding值，则元素就可以在父元素内部实现垂直居中：
<body>
<div class="container">
<p>这是内容</p>
<p>这是内容</p>
<p>这是内容</p>
</div>
</body>
.container {
background: #ccc;
padding: 40px 0;
}
2. 通过绝对定位实现居中
当有弹窗提示类似的场景时，希望元素在页面居中的位置，此时弹出窗口元素的宽高都是固定已知的，此时使用绝对定位对元素居中：
<body>
<div class="container">
<header>header</header>
<div class="content">content</div>
</div>
</body>
.container {
width: 200px;
height: 150px;
border:1px solid black;
position: absolute;
left: 50%;
top: 50%;
margin-left: -100px;
margin-top: -75px;
}
.container header {
background: black;
color: white;
}
如果窗口宽高不是已知的，而是会随着内容发生变化，那么只需将原有代码中的margin-left和margin-top属性替换为CSS3中的transform属性即可：
.container {
width: 200px;
height: 150px;
border:1px solid black;
position: absolute;
left: 50%;
top: 50%;
/* margin-left: -100px;
margin-top: -75px; */
transform: translate(-50%,-50%);
}
3. 使用vertical-align实现居中
在父元素中放置一个高度为100%的空元素，并对其以及需要居中的元素设置vertical-align: middle，就可以实现在父元素中垂直居中了：
<body>
<div class="box">
</div>
</body>
.box {
width: 300px;
height: 200px;
border: 1px solid black;
text-align: center;
}
.box:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
.box img {
width:200px;
vertical-align: middle;
}
点此查看示例效果
这种居中方式存在一些问题，例如父元素中不能有其他的非居中元素，而且只对行内元素和表格有效。
4. 使用table-cell实现居中
这种实现方式是将父元素设置为table-cell，再对其设置vertical-align: middle的对其方式，实现子元素垂直居中：
<body>
<div class="box">
</div>
</body>
.box {
width: 300px;
height: 200px;
border: 1px solid black;
display: table-cell;
text-align: center;
vertical-align: middle;
}
点此查看示例效果
这种实现方式改变了父元素的display属性，也就改变了它的默认表现方式，可能会带来副作用。
网友评论