Css实现元素的垂直居中

前言：

在写CSS的时候让元素在高度固定的容器中垂直居中是很简单的，譬如设置容器的padding或者元素的margin之类的都可以做到；让元素在容器中水平居中也有text-align:center、margin:0 auto;之类的属性来帮我们达到目的，但是如何让元素在不确定高度的容器中垂直居中或者行数不确定的文字在高度固定的容器垂直居中呢？下面我们来讨论几种让元素垂直居中的方法：

 

一、文字的垂直居中

1、单行文字

line-height与height高度相同，就可以让单行文字垂直居中

2、多行文字

我们可以把多行的文字当做图片来处理，用span将文字封装起来，并设置与图片相同的display属性（inline-block）,然后用处理图片垂直居中的方式让多行文字垂直居中即可。

<div class="wrap">
    <span class="content">
        content<br>
        content
    </span>
</div>

.wrap {
    width: 200px;
    height: 200px;
    line-height: 200px;
    background-color: #36AF77;
}
.content {
    display: inline-block;
    vertical-align: middle;
    line-height: 15px;
    font-size: 14px;
}

运行结果：

 

二、图片的垂直居中

1、通过vertical-align和line-height来实现垂直居中

<div class="wrap">
    <img src="E:/picture/me.jpg" alt="">
</div>

.wrap {
    width: 200px;
    height: 200px;
    line-height: 200px;
    font-size: 0;
    background-color: #36AF77;
}
img {
    vertical-align: middle;
}

运行结果：

2、通过100%高度的span进行垂直居中

<div class="wrap">
    <img src="E:/picture/me.jpg" alt=""><span></span>
</div

.wrap {
    width: 200px;
    height: 200px;
    background-color: #36AF77;
}
img {
    vertical-align: middle;
}
span {
    display:inline-block;
    height: 100%;
    vertical-align: middle;
}

运行结果：

这里的img与一个height:100% 的span同行，使这一行的行高撑满div。

3、背景图定位的方法

<div class="wrap">
</div>

.wrap {
    width: 200px;
    height: 200px;
    background-color: #36AF77;
    background-image: url("E:/picture/me.jpg");
    background-position: center;
    background-size: 60%;
    background-repeat: no-repeat;
}

运行结果：

这里将图片作为容器的背景，通过background-position属性让它居中。

4、通过table-cell来实现垂直居中

<div class="wrap">
    <img src="E:/picture/me.jpg" alt="">
</div>

.wrap {
    width: 200px;
    height: 200px;
    background-color: #36AF77;
    display: table-cell;
    font-size: 0;
    vertical-align: middle;
}

运行结果：

 

W3C上对vertical-align的定义：vertical-align 属性设置元素的垂直对齐方式。

该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。

在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。

5、利用flex弹性布局实现垂直居中

<div class="wrap">
    <img src="E:/picture/me.jpg" alt="">
</div>

img {
    width: 88px;
    height: 88px;
}
.wrap {
    width: 200px;
    height: 200px;
    background-color: #36AF77;
    display: flex;
    justify-content: center;
    align-items: center;
}

运行结果：

可惜IE10之前的版本是不支持的，大家自行尝试

6、利用after伪类

<div class="wrap">
    <img src="E:/picture/me.jpg" alt="">
</div>

img {
    width: 88px;
    height: 88px;
}
.wrap {
    width: 200px;
    height: 200px;
    background-color: #36AF77;
}
.wrap:after {
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
img {
    vertical-align: middle;
}

运行结果：

这种方式和第二种类似，只是用after伪类生成的元素代替了span元素而已。

7、在已知图片高度的情况下借助额外的块级元素

<div class="wrap">
    <div class="temp"></div>
    <img src="E:/picture/me.jpg" alt="">
</div

 img {
      width: 88px;
      height: 88px;
 }
 .wrap {
      width: 200px;
      height: 200px;
      background-color: #36AF77;
 }
 .temp {
      height: 50%;
      margin-bottom: -44px;
      opacity:0;
 }

运行结果：

opacity:0  //透明不显示但是占位

8、在已知图片高度的情况下借助margin-top负边距

<div class="wrap">
    <img src="E:/picture/me.jpg" alt="">
</div>

img {
    width: 88px;
    height: 88px;
}
.wrap {
    position: relative;
    width: 200px;
    height: 200px;
    background-color: #36AF77;
}
img {
    position:absolute;
    top: 50%;
    left:0;
    right:0;
    margin:auto;
    margin-top: -44px;
}

运行结果：

9、借助绝对定位

<div class="wrap">
    <img src="E:/picture/me.jpg" alt="">
</div>

.wrap {
    position: relative;
    width: 200px;
    height: 200px;
    background-color: #36AF77;
}
img {
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    margin:auto;
}

运行结果：

10、主角最后登场----万能的居中方式(绝对定位加transform)

<div class="wrap">
    <img class="center" src="E:/picture/me.jpg" alt="">
</div>
<div class="wrap">
    <img class="vertical-center" src="E:/picture/me.jpg" alt="">
</div>
<div class="wrap">
    <img class="horizon-center" src="E:/picture/me.jpg" alt="">
</div>

.center {
    left: 50%;
    top: 50%;
    position: absolute;
    -webkit-transform: translate3D(-50%,-50%,0);
    -ms-transform: translate3D(-50%,-50%,0);
    -moz-transform: translate3D(-50%,-50%,0);
    -o-transform: translate3D(-50%,-50%,0);
    transform: translate3D(-50%,-50%,0);
    z-index: 100;
}
.vertical-center {
    top: 50%;
    position: absolute;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    z-index: 100;
}
.horizon-center {
    left: 50%;
    position: absolute;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
    z-index: 100;
}
.wrap {
    position: relative;
    width: 200px;
    height: 200px;
    margin-bottom: 10px;
    background-color: #36AF77;
}

运行结果：

通过绝对定位到50%的位置，再转换自己高度宽度50%的负距离来实现居中显示。

然而万能的方法并不万能，transform在IE9及其以下是不支持的，大家节哀。

 

关于水平居中文字可以用text-align:center,块级元素可以用margin: 0 auto;之类的实现，比较简单就不多说了。

简单介绍了10种图片的的居中方法，有没有觉得有所感悟，妈妈再也不用担心我不会元素居中了。

 

以上