html css实现文本水平垂直居中显示

这几天在工作中遇到了一个小问题：文本内容怎么能在div里水平垂直居中显示呢？同时群里的小伙伴恰巧也有提问这个问题的，所以我就总结了一下我知道的方法。

一、利用行高(line-height)和vertical-align配合实现

具体做法如下：

html:

<div class="box">
    <span>测试文字</span>
</div>

css:

.box{
    width: 200px;
    height: 200px;
    overflow: hidden;
    background: #ccc;
    text-align: center;
}
.box span{
    vertical-align: middle;
    line-height: 200px;
}

这个地方要注意的是：在.box加line-height与span加line-height的结果是有些许差别的。

结果：

但是这样写存在一个算是挺致命的缺点，当文本存在折行的情况怎么办？例如：

html：

<div class="box">
    <span>测试文字测试文字测试文字测试文字</span>
</div>

css：

.box{
    width: 200px;
    height: 200px;
    background: #ccc;
    text-align: center;
}
.box span{
    vertical-align: middle;
    line-height: 200px;
}

结果：

很明显，这样的结果不是我们想要的，所以这个方法不是很完美的做法。

二、利用display:table-cell实现水平垂直居中显示

这种方法我是从网上搜来的，具体做法如下：

html：

<div class="cell">
    <span>测试文字测试文字测试文字测试文字</span>
</div>

css：

.cell{
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    width: 240px;
    height: 180px;
    border: 1px solid #666;
    background: #ccc;
}

结果：

这种做法无疑是可以解决水平垂直居中显示的问题，而且就算折行也没有关系，但是它不支持margin属性了，其他不支持什么属性我没试过，但是我想会跟table内td不支持的属性大差不差。个人感觉比第一种方法要好一些。

三、利用定位方式(position)+css的transform实现水平垂直居中显示

这种方法是我经常使用的一种方法，但是如果需要兼容较低版本的浏览器的话不太实用。具体方法如下：

html：

<div class="box">
    <span>测试文字测试文字测试文字测试文字</span>
</div>

css：

.box{
    width: 200px;
    height: 200px;
    background: #ccc;
    text-align: center;
    position: relative;
}
.box span{
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

结果：

这种方式采用了绝对定位，把文本内容定位到外层div(.box)的正中位置，他们的中心点是重叠的，从而实现水平垂直居中显示。这个方法不仅仅实用与文本内容，也适用于div、img等其他html元素。

 

以上的三种方法就是我比较常用的几种文本水平垂直居中显示的方式，可能还有其他方法我没有用到，欢迎大家给予指正和补充。当然实现居中之后的样式我这里设置的比较简单，大家可以自由发挥使其更加漂亮。

第一次写技术博客，不足的地方还希望不吝赐教。