css水平居中很简单，只需一行字，使用text-align: center; 或者 margin: auto; 就可以使文字或者图片居中，而要是让文字或者图片垂直居中，说实话在CSS中还没有一条语句就能解决垂直居中的问题。而这个是个普遍的需求，基本上设计师在设计的时候都会设计垂直居中的样式。下面总结了几种实现方式。
一、基于绝对定位的解决方案
html
<div class="inner-1" style="height: 100px; text-align: center;">
<div class="inner-1-text">第一条文本</div>
</div>
css
.inner-1 {
position: relative;
width: 200px;
height: 200px;
background: white;
overflow: hidden;
}
.inner-1-text {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
-
这种方法采用了绝对定位，.inner-1-text 中将元素的位置首先定位在距父元素上方一半的距离，距左边一半的距离，但是这时还没有居中，然后使用translate()变形函数，在translate()变形函数中使用百分比值时，是以这个元素自身的宽度和高度为基准进行换算和移动的，向左边和上边移动自身宽度和高度的一半，正好将元素居中。
-
但有时我们不能选用绝对定位，因为它对整个布局影响太过强烈，而如果居中的元素的高度超过了视口，那它的超出的部分就会被裁掉。
二、基于Flexbox的解决方案
html
<div class="inner-2" >
<h4>第二条文本垂直居中，哈哈哈哈hhhhhhhhhhh啦啦啦啦</h4>
</div>
css
.inner-2 {
height: 200px;
width: 200px;
display: flex;
align-items: center;
justify-content: center;
}
- 对比了一下，觉得还是这种方式最简单效果最佳，只需要两三行就可以解决垂直居中的问题。首先给居中元素的父元素设置display:flex; 设置align-items: center; justify-content: center;可以让它的内部文本居中。
三、使用table
还有一种方法就是直接使用table布局
html
<table style="width: 100%;">
<tr>
<td style="text-align: center; vertical-align: middle;">
Unknown stuff to be centered.
</td>
</tr>
</table>
如果担心语义上的不同，可以使用这种写法
<div class="something-semantic">
<div class="something-else-semantic">
Unknown stuff to be centered.
</div>
</div>
CSS
.something-semantic {
display: table;
width: 100%;
}
.something-else-semantic {
display: table-cell;
text-align: center;
vertical-align: middle;
}
- CSS table或许适用你现在的需求或者不适用，Tables渲染出来的样式会区别常规的块状元素，例如宽度会100%拉伸到父元素的宽度自适应。如果你需要包含其他样式，使用div可以声明table可以得到解决。
网友评论