这道题看似貌似很简单，但是我们需要分析具体的场景，因为不同的显示方式的使用利弊是不一样的。
以下的讨论都是子元素相对于其父元素的水平居中。垂直居中，以后会说到。
常见的行内元素有 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 晴
于上海浦东
如果您觉得我的文章有用，欢迎点赞和关注，也欢迎光临我的个人博客 https://github.com/BokFang
在这里总结一下CSS水平居中、垂直居中的各种方式。应该说非常全了。
总览一下：
用法：在父级元素的样式中添加 text-align:center
效果图：
用法：在元素样式添加 margin:0 auto ，使其margin-left和margin-right平分块级元素那一行剩余的宽度。
效果图：
当然如果你的块级元素没有设置width，那么div就会占满一行，也就没有水平居中的说法了。
如果由多个块级元素，则可以使用 inline-block 配合 text-align:center ，将 inline-block 写在需要居中的元素样式上, text-align:center 写在父级元素上。
效果图：
使用flex也可以轻松做到多个块级元素水平居中
用法：在父级元素样式增加 display: flex justify-content: center
效果图与第三个一样。
当然，多个块级元素能用的居中方法，在单个块级元素上也同样可以使用。
使用 display:table 配合 margin:0 auto ，可以达到不定宽块级元素居中效果。
效果图：
使用绝对定位给元素一个left:50%，然后再加一个margin-lelt:-(宽度的一半)
效果图：
不过缺点很明显，就是你知道元素宽度而且得固定不变，所以是比较蠢的一种写法。
效果图：
效果图：
这个方法和水平居中的第6个方法一样，就不多说了。
效果图：
这个和水平居中的第7个方法一样，我也就不多说了。
效果图：
效果图：
效果图：
缺点也比较明显，需要计算。
效果图：
效果图：
效果图：
需要在html中加入 <table>标签，比较低效，我就不详写了，想了解的朋友可以Google搜索一下。
如果您觉得我的文章有用，欢迎点赞和关注，也欢迎光临我的个人博客 https://github.com/BokFang
有很多种方法，我给你列举几个实际情况中经常用的
对于具有inline属性的元素，可以设置行高与高相同，text-align设置为center即可
对于块级元素
①父元素为相对定位，想让绝对定位的元素水平垂直居中，可设置top left两个属性的值为50%，然后通过transform属性的translate(-50%, -50%)来达到水平垂直居中的效果
②对于没有相对于父级定位的元素，可以在设置margin:auto达到水平居中的前提下，给该元素这只相对定位，把top的值设为50%，再利用transform的translateY（-50%）同样也能达到视觉上的水平垂直居中效果
③就是对于想在一列展示块级元素水平垂直居中的方法，最方便的不需要用float设置浮动，这样会脱离文档流，需要通过定位去控制，浮动加定位的属性在一起是不建议的，所以对于这种情况可以将block块级元素的display设置为inline-block，在不损失块级元素的属性情况下，再利用第一种方法去设置垂直水平居中
这个就是弹性布局了，父级display设置flex，成为弹性容器，弹性子元素可根据实际需求进行不同效果的水平垂直居中
整体上有很多种方法达到水平垂直居中的效果，无外乎就是通过内外边距，定位，行高加文本居中的方式，前端的目的不是让元素确确实实居中了，而是用最优的方法在视觉效果上居中。
