这道题看似貌似很简单，但是我们需要分析具体的场景，因为不同的显示方式的使用利弊是不一样的。
以下的讨论都是子元素相对于其父元素的水平居中。垂直居中，以后会说到。
常见的行内元素有 span img 等，对这些元素居中设置，只需要在父元素的css中添加 text-align:center 即可。同样它也对行内块元素也是有效的。
但是，有个缺点，由于 text-align 是可继承属性，即父元素内部的所有元素都会继承这个属性，从而它的子元素内部的文本都会居中显示了。因此需要对子元素的文本居中方式单独设定。
针对块级元素的居中，我们将分为定宽和不定宽两种情况来讨论。
1.定宽
（1）子元素是正常流布局
若子元素的宽度是已知的，那么我们可以设置子元素的左右 margin 为 auto 即可
行内块元素也算块级元素，同样适用
目前所有浏览器都是支持的
（2）子元素绝对定位布局(absolute)
如果子元素是绝对定位的，由于子元素此时是脱离文档流，上面的方法就失效了。这时需要明确指出子元素的定位，四个方位均要指定。如下：
这样也可以实现绝对定位元素的居中。原因可点击 这里 。如果绝对定位子元素的margin为auto，你会发现它水平垂直居中了！此方法仅适用于IE8+浏览器中，IE7就挂了，不过你可以下面这个方法：
2.不定宽
不定宽元素如果要居中需要额外的辅助手段
（1）css3新特性 transform
如果你对浏览器并没有什么特别要求，那么可以使用css3提出的新属性 transform 完成居中需求
这里需要子元素是绝对定位
（2）借助table元素
上面定宽元素设定左右margin为auto之所以可以居中，原因是左右margin会平分父元素剩下的空间。有个元素除外，那就是tabel元素。table有趣的地方在于它本身并不是块级元素，如果不给它设定宽度的话，它的宽度由内部元素的宽度“撑起”，但即使不设定它的宽度，仅设置margin-left:auto和margin-right:auto就可以实现水平居中。
最大的缺点想必你也是知道，就是无关标签太多，加深了嵌套的层级，维护性很差。
（3）父元素使用float布局
这里需要多添加一层父元素，父子元素均float布局，之后设置position为relative，left为50%
缺点是你需要额外处理浮动所带来的一些问题。并且如果你设置了背景色，布局会有些混乱
以上是我对元素实现居中的一些方法，欢迎大家补充。
2017.6.11 晴
于上海浦东
盒子居中是相对于父元素来说的，因此我们让盒子居中时，往往采用嵌套的方式，让父盒子套着子盒子 。在父子盒子嵌套下，让子盒子居中的方式：
第一种方法：position， 使用定位，子绝父相，再left:50%，margin-left:负的盒子宽度的一半，这是最常用的方法
第二种方法：flex，弹性布局，让子盒子居中，但是样式要写在父盒子中，display:flex,just-content:center
第三种方法：在position基础上，把margin-left换成CSS3中的transform：translate(-50px)
第四种方法：在position的基础上，只保留子绝父相，然后在子盒子中加上margin:auto、left:0、right:0；
在前端布局中居中方式可以说是家常便饭，几乎所有地方都需要用到他，我们常见的就是水平居中和垂直居中。
水平居中：水平居中就是为了让子元素在父元素中排列在水平中心位置，实现方式很多，我们看几种常用的。
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
关于常见居中问题就说几种常用的，其它技巧小伙伴们可自行研究，相信还有很多奇怪的方式也可以达到效果。
