在还没有css3的时候，要给出确定的left和top值，需要经过较多的计算，而在css3中，就不需要这么麻烦了，top和left直接设置成50%，然后利用css3的transform属性。这个属性有一个translate值，表示移动元素，只需给元素加上transform:translate(-50%,-50%)这句css即可。
需要注意的是，在给元素绝对定位的时候写的50%，表示父元素的宽高，而这里transform中的50%，表示元素自身的宽高，加上负号表示反向。
在前端布局中居中方式可以说是家常便饭，几乎所有地方都需要用到他，我们常见的就是水平居中和垂直居中。
水平居中：水平居中就是为了让子元素在父元素中排列在水平中心位置，实现方式很多，我们看几种常用的。
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
关于常见居中问题就说几种常用的，其它技巧小伙伴们可自行研究，相信还有很多奇怪的方式也可以达到效果。
前言：根据最近学习的课程，简单总结一下学习到的css左右布局以及居中方案。后期学习深入之后再回来进行css居中的完整总结。给所有子元素添加 float: left ，给父元素加 clearfix 类，清除浮动
html:
css:
将内联元素外部的块级元素的 text-align 设置为 center ，即可实现内联元素（ inline 、 inline-block ）的水平居中。
演示
将固定宽度的块级元素的 margin-left 和 margin-right 设置为 auto ，即可实现块级元素的水平居中。
演示
将每个块级元素的 display 设置为 inline-block ，然后将它们的父容器的 text-align 设置为 center ，即可使多个块级元素水平居中。
演示
设置内联元素的行高（ line-heigt ）和内联元素的父元素的高度（ height ）相等，且内联元素的字体大小远小于行高，即可使内联元素垂直居中。
演示
通过绝对定位元素距离顶部50%，并设置margin-top向上偏移元素高度的一半，即可实现垂直居中。
演示
借助CSS3中的transform属性向Y轴反向偏移50%的方法实现垂直居中
演示
