css垂直水平居中實現的方式

項目和面試經常遇到css如何實現元素如何水平垂直居中。CSS中實現水平居中，會比較簡單。常見的，如果想實現inline元素或者inline-block元素水平居中，可以在其父級塊級元素上設置text-align: center實現；如果想實現塊級元素的水平居中對齊，可以設置magin: auto。而如果想實現垂直居中對齊，或許就不太容易。以下，我總結了一些實現水平垂直居中對齊的一些方法。如果有什么不足之處，望指出。

固定高度的實現水平垂直居中

1.使用絕對定位方法，配合margin負值使用。可以實現

<div class="div0">
  <div class="div1"> </div>
</div>
.div0 {
    width: 80%;
    height: 500px;
    background: lightblue;
    position: relative;
    margin: 0 auto;
}
.div1{
    width: 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 {
    width: 80%;
    height: 500px;
    background: lightblue;
    position: relative;
    margin: 0 auto;
}
.div1{
    width: 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;
}

高度自適應實現水平垂直居中

1. 當一個定位的元素偏移為0且margin為auto時將水平，垂直都居中，且父元素的高度可動態變化

<div class="div0">
		<div class="div1"></div>
</div>
 .div0{
        width:80%;
        height:90%;
        border:3px solid lightblue;
        margin:0 auto;
        position:relative
     }
.div1{
    width: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 {
        width: 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{
    width:400px;
    height:400px;
    display:flex;
    align-items:center;
    justify-content: center;
    border:1px solid #000;
}
.flex .item{
    width: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以表格的形式渲染 */
    width: 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 {
        width: 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;
}