css元素垂直居中的8中方法

1、

通过vertical-align:middle实现CSS垂直居中

通过vertical-align:middle实现CSS垂直居中是最常使用的方法，但是有一点需要格外注意，vertical生效的前提是元素的display：inline-block。

　.wrap1{ line-height: 100px;}
 .item{
      width: 40px;
      height: 20px;
      background: yellowgreen;
  }

　　.verticle_align{
    　　display: inline-block;
   　　 vertical-align: middle;
　　}

 

    <div class="wrap wrap1">
        <div class="item verticle_align"></div>
    </div>

 

2、通过display:flex实现CSS垂直居中。q
 随着越来越多浏览器兼容CSS中的flexbox特性，所以现在通过“display:flex”实现CSS水平居中的方案也越来越受青睐。 通过display:flex实现CSS垂直居中的方法是给
 父元素display:flex;而子元素align-self:center; 这个跟CSS水平居中的原理是一样的，只是在flex-direction上有所差别，一个是row(默认值)，另外一个是column。

.wrap2{
            display: flex;
        }
        .flex{
            align-self: center;
        }

 <div class="wrap wrap2">
        <div class="item flex"></div>
    </div>

　　

3、通过伪元素:before实现CSS垂直居中。
具体方式是为父元素添加伪元素:before，使得子元素实现垂直居中。
　　跟1出现的问题一样，居中的有问题

.wrap3:before{
            content: "";
            display: inline-block;
            vertical-align: middle;
            height: 100%;
        }
        .fu_before{
            display: inline-block;
        }

<div class="wrap wrap3">
        <div class="item fu_before"></div>
    </div>

　　

4、通过display:table-cell实现CSS垂直居中。
 给父元素display:table，子元素display：table-cell的方式实现CSS垂直居中。
　　相当于把元素属性转变为表格属性
　　子元素会在父元素中充满，此种方法有问题

.wrap4{
            display: table;
        }
        .table-cell{
            width: 50px!important;
            height: 50px!important;
            display: table-cell;
            vert-align: middle;
        }

<div class="wrap wrap4">
        <div class="item table-cell"></div>
    </div>

　　

5、通过隐藏节点实现CSS垂直居中。
创建一个隐藏节点#hide，使得隐藏节点的height值为剩余高度的一半即可。 这种方法也适用于CSS水平居中，原理一样。

基本不可取；增加多余元素，而且元素如果高度不固定这个方法就不合适

.hide{
            width: 100%;
            height: 40px;
        }

<div class="wrap wrap5">
        <div class="hide"></div>
        <div class="item hide-ele"></div>
    </div>

　　

6、已知父元素高度通过transform实现CSS垂直居中。
 给子元素的position:relative，再通过translateY即可定位到垂直居中的位置。

这种方式多数可用于移动端，css3属性，电脑端页面可能兼容不是很好

.transform-relative{
            position:relative;
            top:50%;
            transform:translateY(-50%);
        }

<div class="wrap wrap6">
        <div class="item transform-relative"></div>
    </div>

　　

7、未知父元素高度通过transform实现CSS垂直居中。 先给父元素position:relative，再给子元素position:absolute，通过translateY即可定位到垂直居中的位置。

　　类似方法6

.wrap7{
            position: relative;
        }
        .transform-absolute{
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
        }

<div class="wrap wrap7">
        <div class="item transform-absolute"></div>
    </div>

　　

8、通过line-height实现CSS垂直居中。 设置子元素的line-height值等于父元素的height，这种方法适用于子元素为单行文本的情况

　　只适合单行文本

 .wrap8{
            line-height: 100px;
        }
        .line-height{
            display: inline-block;
        }

<div class="wrap wrap8">
        <div class="item line-height"></div>
    </div>