css（css3）实现垂直水平居中的那些事

都说“金三银四求职季”，本人也选择了在这个时候成为这浩浩荡荡的求职大军中的一员，几次面试下来，发现面试官都爱问的一个问题就是：“说说垂直水平居中都有哪些实现方式吧？”
      面试过程巴拉巴拉一大堆，现在终于有时间把这些知识点总结归纳起来，希望能帮自己巩固下，也希望可以帮到有需要的小伙伴~大神路过求轻喷求包涵。
     言归正传，既然说到垂直水平居中，那现在咱们就来好好归纳下：“水平居中”、“垂直居中”以及“垂直水平都居中” 到底利用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>