1.单个元素水平居中
CSS3 Flexbox轻松实现元素的水平居中和垂直居中
CSS代码
.box{
display: flex
justify-content: center
background: #0099cc
}
h1{
color: #FFF
}
在前端布局中居中方式可以说是家常便饭，几乎所有地方都需要用到他，我们常见的就是水平居中和垂直居中。
水平居中：水平居中就是为了让子元素在父元素中排列在水平中心位置，实现方式很多，我们看几种常用的。
1. 使用display：inline-block和text-align：center
display:inline-block
text-align：center
原理就是将子容器设置为行内块元素，然后给父容器设置让文字居中的属性以达到目的。
缺点就是里面文字都会居中，可单独设置样式来解决。
2. 使用position：absolute和transform
position:absolute
transform: translateX(-50%)
原理就是先将子容器设置为相对定位，移动左侧距离为相对宽度的一半，这样会使整个容器的左侧在一半的线的位置，看起来靠右了，我们需要再通过向左移动子容器的一半来达到目的。
缺点就是transform属于css3内容，存在浏览器兼容问题。已知宽高时可以将transform换成margin-left设置为负的自身宽度一半达到相同的目的。
4. 使用flex和justify-content
display:flex
justify-content:center
原理就是通过css3布局属性flex将子容器转换为flex item情况，然后通过justify-content属性来达到居中。这种方式需要给父容器设置这两种属性。
缺点就是css3属性，有浏览器兼容问题。
垂直居中：垂直居中就是为了让子元素在父元素中排列在垂直中心位置，实现方式很多，我们看几种常用的。
1. 使用display：table-cell和vertical-align
display:table-cell
vertical-align:middle
原理就是通过将父容器转换为一个表格单元格来显示，再通过将表格单元格内容垂直居中。
使用时需要将两种属性都设置到父容器身上。
2. 使用position：absolute和transform
position:absolute
transform: translateY(-50%)
原理类似于水平居中，就是先将子容器设置为相对定位，移动顶部距离为相对高度的一半，这样会使整个容器的顶部在一半的线的位置，看起来靠下了，我们需要再通过向上移动子容器的一半来达到目的。
缺点就是css3属性，有浏览器兼容问题。已知宽高情况时可以将transform换成margin-top设置为负的自身高度一半达到相同的目的。
3. 使用display：flex和align-items
display:flex
align-items:center
原理就是通过css3布局属性flex将子容器转换为flex item情况，然后通过align-items属性来达到居中。这种方式需要给父容器设置这两种属性。
缺点就是css3属性，有浏览器兼容问题。
水平垂直同时居中：
关于同时居中有了以上两种方式难道还怕出不来效果吗，只是需要稍稍结合一下即可，比如以下常见结合使用：
1. 使用position:absolute和margin（已知宽高）
position:absolute
left:50%
top:50%
width:100px
height:100px
margin-left:-50px
margin-top:-50px
2. 使用position:absolute和transform（未知宽高）
position:absolute
left:50%
top:50%
transform: translateX(-50%)
transform: translateY(-50%)
3. 使用position:absolute和margin（未知宽高）
position:absolute
left:0
top:0
right:0
bottom:0
margin:auto
4. 使用flex和justify-content和align-items属性（未知宽高）
display:flex
justify-content:center
align-items:center
关于常见居中问题就说几种常用的，其它技巧小伙伴们可自行研究，相信还有很多奇怪的方式也可以达到效果。
通常首选方法是使用 flexbox 居中内容。只需三行代码即可： display:flex ，然后使用 align-items:center 和 justify-content:center 将子元素垂直和水平居中。
如下代码：
html：
css：
使用grid(网格)与flexbox非常相似，也是一种常见的技术，尤其是布局中已经使用网格的情况下。与前一种flexbox技术的唯一区别是它显示为栅格。
如下代码：
html:
css:
使用css transform 居中元素，前提是容器元素必须设置为 position:relative ，然后子元素使用 left:50%和 top:50% 偏移子元素，最后使用 translate（-50%，-50%） 以抵消其偏移的位置。
代码如下：
html：
css：
最后，表格居中是一种旧技术，在使用旧浏览器时，您可能会喜欢这种技术。前提是容器元素设置为 display:table ，然后子元素设置为 display: table-cell ，最后使用 text-align: center 水平居住和 vertical-align: middle 垂直居中。
代码如下：
html：
css:
