都說“金三銀四求職季”，本人也選擇了在這個時候成為這浩浩蕩蕩的求職大軍中的一員，幾次面試下來，發現面試官都愛問的一個問題就是：“說說垂直水平居中都有哪些實現方式吧？”
      面試過程巴拉巴拉一大堆，現在終於有時間把這些知識點總結歸納起來，希望能幫自己鞏固下，也希望可以幫到有需要的小夥伴~大神路過求輕噴求包涵。
     言歸正傳，既然說到垂直水平居中，那現在咱們就來好好歸納下：“水平居中”、“垂直居中”以及“垂直水平都居中” 到底利用css或者css3是怎麼實現的。
    一、css實現水平居中
           (1)行內元素：在其父元素上設定text-align:center;
<p class="align" style="text-align: center;width: 300px;border: 1px solid #666666;"><a href="#">測試行內元素的水平居中效果</a></p>
            (2)單個塊級元素（也可以運用到給一個浮動的元素設定）：設定width以及margin:0 auto
<div class="margin" style="width: 200px;background: aqua;margin: 10px auto;height: 100px;"></div>
            (3)多個塊級元素實現水平居中：
            ①為這些塊級元素設定display:inline-block屬性，其父元素設定：text-align:center     （這塊的程式碼就不貼出了）
           ②利用flexbox佈局:在這些塊級元素的父元素上設定display:flex;justify-content:center
          注意：一般的瀏覽器設定：display:-webkit-flex;display：flex;對於IE瀏覽器需設定display：-ms-flexbox
css樣式：
.flexbox div{width: 100px;height: 100px;background: pink;margin: 0px 20px;}
<div class="flexbox">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
二、css實現垂直居中(1)單行的行內元素 設定子元素的line-height等於父元素的height,  
<p class="line-he" style="width: 300px;height: 200px;color: #666;border: 1px solid #00FFFF;"><a style="height: 200px;line-height: 200px;">這是測試單行的行內元素的垂直居中</a></p>
 (2)多行的行內元素 ：
① 針對非IE瀏覽器 組合使用table-cell和vertical-align：middle 
② 針對IE瀏覽器 利用font-size 本例中的*針對的是IE6-7瀏覽器（對於IE的各種hack我自己掌握的也不是很全面，要補一補這塊的知識了）
<style>
.parent{
width:200px;height:200px;border:1px solid black;
line-height:200px;
display: table-cell;vertical-align:middle;
*display: block;
*font-size:175px;
*font-family:Arial;}
.iemiddle img{vertical-align: middle;}
</style>
<div class="parent">
<img src="img/HBuilder.png"/>
</div>
(3)已知子元素（塊級元素例如:div）的高度和寬度 利用position：absolute（注:如果該元素的高度和寬度是動態新增的，可以利用jq動態移動margin-top以及margin-left）
①已知div的高度和寬度 ：在子元素上設定position：absolute；top:50%;left:50%;(因為子元素的左右上下移動是以該元素的左上角的為頂點的，因此需要再利用margin-top和margin-left)再稍微調整；
②需要根據子元素的動態寬高進行動態移動的 利用jq
$(window).resize(function(){ 
$(".mydiv").css({ 
position: "absolute", 
left: ($(window).width() - $(".mydiv").outerWidth())/2, 
top: ($(window).height() - $(".mydiv").outerHeight())/2 
}); 
}); 
此外在頁面載入時，就需要呼叫resize()。
$(function(){ 
$(window).resize(); 
}); 
<style>
.parent{position: relative;width: 300px;height: 300px;border: 1px solid plum;}
.chlid{width: 100px;height: 100px;background: red;position: absolute;top: 50%;margin-top: -50px;left: 50%;margin-left: -50px;}
</style>
<div class="parent">
<div class="chlid"></div>
</div>
(4)利用table實現垂直居中 table元素作為父級元素新增 align="middle"：
<table class="table" style="width: 600px;height: 200px;border: 1px solid #00FFFF;">
<tr >
<td align="middle">
<div>
測試垂直居中
測試垂直居中
測試垂直居中
測試垂直居中 
</div>
</td> 
</tr>
</table>
三、css實現垂直水平居中
      (1)單行的行內元素  
        ① 圖片元素   在父元素上設定  display:table-cell(重點) text-align：center  vertical-align:middle
        ②文字  在父元素上設定text-align:center 自身設定line-height:為父元素的高度  height：父元素的高度
        ③圖片與文字都有  父元素設定display:table-cell  vertical-align:center;text-algin:center;
        
      (2) 塊級元素
          ①單個塊級元素（絕對定位+nativemargin） ：父元素設定position：relative  自身設定position:absolute;top:50%;left:50%;margin-top:-（為自身的高度的一般;margin-left:-(為自身寬度的一半) ；


四、利用css3實現垂直水平居中
      (1)css3實現子元素不定寬高水平垂直居中
      關鍵點：  1.justify-content:center;//讓子元素水平居中
 2. align-items:center;//讓子元素垂直居中
 3. display:-webkit-flex;
       flex佈局實現水平居中    ①（適用於塊級元素與行內元素的單個元素或多個）實現水平居中 ：在父元素上設定 display:flex  justify-content:center
       
      (2)利用transform實現垂直水平居中
       關鍵點：1.transform:translate(-50%,-50%)
         2.position:relative;top:50%;left:50%；
<style> 
.box{
display: flex;
justify-content: center;
background: #0099cc
}
.box h1{
color: #FFF;
font-size:.5rem;
border: 1px dashed #fff;
padding: 1rem;
font-weight: normal;
}


.box1{
display: flex;
justify-content: center;
width: 100%;
background: #0099cc;
margin-top: 2rem;
}
.box1 h1{
font-size: 1rem;
padding: 1rem;
border: 1px dashed #FFF;
color: #FFF;
font-weight: normal;
}


.box2{
display: flex;
width: 650px;
height: 15rem;
align-items:center; 
background: #0099cc;
margin-top:20px ;
}
.box2 h1{
font-size: 1rem;
padding: 1rem;
border: 1px dashed #FFF;
color: #FFF
}
.parent {
width: 200px;
height: 200px;
background-color: black;
}
.child {
position: relative;
height: 100px;
width: 100px;
top: 50%;
left: 50%;
background-color:red; 
-webkit-transform: translate(-50%, -50%) ;
-moz-transform: translate(-50%, -50%) ;
-ms-transform: translate(-50%, -50%) ;
-o-transform: translate(-50%, -50%) ;
transform: translate(-50%, -50%) ;
}
</style>
<div class="box">
<h1>justify-content屬性實現單個元素水平居中</h1> 
</div>
<div class="box1">
<h1>justify-content實現多個元素水平居中</h1> 
<h1>justify-content實現多個元素水平居中</h1> 
<h1>justify-content實現多個元素水平居中</h1>
</div> <div class="box2"> <h1> align-items實現元素垂直居中</h1> <h1>align-items實現元素垂直居中</h1>
<h1>align-items實現元素垂直居中</h1>
</div> <div class="parent"> <div class="child">利用css3實現垂直水平居中</div> </div>