css垂直水平居中实现的方式

项目和面试经常遇到css如何实现元素如何水平垂直居中。CSS中实现水平居中，会比较简单。常见的，如果想实现inline元素或者inline-block元素水平居中，可以在其父级块级元素上设置text-align: center实现；如果想实现块级元素的水平居中对齐，可以设置magin: auto。而如果想实现垂直居中对齐，或许就不太容易。以下，我总结了一些实现水平垂直居中对齐的一些方法。如果有什么不足之处，望指出。

固定高度的实现水平垂直居中

1.使用绝对定位方法，配合margin负值使用。可以实现

<div class="div0">
  <div class="div1"> </div>
</div>
.div0 {
     80%;
    height: 500px;
    background: lightblue;
    position: relative;
    margin: 0 auto;
}
.div1{
     200px;
    height: 150px;
    background: lightcoral;
    position: absolute;
    left: 50%;
    top:50%;
    margin-top: -75px;
    margin-left: -100px;
}
css3简化上面的方法
<div class="div0"> 
    <div class="div1"> </div>
</div>
.div0 {
     80%;
    height: 500px;
    background: lightblue;
    position: relative;
    margin: 0 auto;
}
.div1{
     200px;
    height: 150px;
    background: lightcoral;
    position: absolute;
    left:calc(50% - 75px);
    top:calc(50% - 100px);
}

2.使用height + line-height的方式，设置同样的值，配合text-align的使用，即可实现文本的水平垂直居中对齐

<div class="div0">
 如果是单行文本，行高如块的高度一样时将居中，只一行，行高和元素一样高，居中
</div>
.div0 {
     background: lightblue;
     height: 80px;
     line-height:80px;
     text-align:center;
}

高度自适应实现水平垂直居中

当一个定位的元素偏移为0且margin为auto时将水平，垂直都居中，且父元素的高度可动态变化

<div class="div0">
		<div class="div1"></div>
</div>
 .div0{
        80%;
        height:90%;
        border:3px solid lightblue;
        margin:0 auto;
        position:relative
     }
.div1{
    200px;
    height:150px;
    background:lightgreen;
    position:absolute;
    /*居中开始*/
    top:0px;
    left:0px;
    right:0px;
    bottom:0px;
    margin:auto;
    /*居中结束*/ 
     }

2.CSS3中有transform属性，此属性下有一个translate移动函数，此函数接受两个参数。如果两个参数都为百分比值，此时会基于自身宽度和高定进行移动

<div class="div0">
     <img src="img.png" class="img1">
</div>
.div0 {
         80%;
        height: 70%;
        background: lightblue;
        margin: 0 auto;
        position: relative;
    }
.img1 {
        position: absolute;
        top: 50%;
        left: 50%;
        transform:translate(-50%,-50%);
    }

3.css3弹性盒子flex,设置水平居中属性justify-content:center，设置垂直居中属性align-item:center

<div class="flex">
    <div class="item">
        aaa
    </div>
</div>
.flex{
    400px;
    height:400px;
    display:flex;
    align-items:center;
    justify-content: center;
    border:1px solid #000;
}
.flex .item{
    50px;
    height:50px;
    background:red;
    border:1px solid #000;
}

4.使用可以使用 display: table来模拟表格，并给子元素设置display: table-cell，让其成为表格的某个单元格，同时设置vertical-align: middle，即可实现垂直居中布局

<div class="container">
    <div class="inner">
        hello world！
    </div>
</div>
.container {
    display: table;         /* 让div以表格的形式渲染 */
     100%;
    border: 1px solid red;
}

.inner {
    display: table-cell;    /* 让子元素以表格的单元格形式渲染 */
    text-align: center;
    vertical-align: middle;
}

其它类型

1.`vertical-align:middle这个属性的特点，它是相对于兄弟级行高（line-height）来定位(我的理解).

<div class="div0">
    <img src="img.png" class="img1"><span class="span1"></span>
</div>
.div0 {
         80%;
        height: 500px;
        background: lightblue;
        position: relative;
        margin: 0 auto;
        text-align: center;
    }
.img1{
        vertical-align: middle;
    }
.span1{
        line-height:500px;
  }

2.某些时候需要将小图标与文字对齐，可以使用对齐的属性absmiddle(绝对居中)

<div class="div1">
    <img src="img.png" align="absmiddle">电视机</div>
 .div1{
    border: 2px solid lightblue;
}