这道题看似貌似很简单，但是我们需要分析具体的场景，因为不同的显示方式的使用利弊是不一样的。
以下的讨论都是子元素相对于其父元素的水平居中。垂直居中，以后会说到。
常见的行内元素有 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 晴
于上海浦东
使用CSS 语法要设定一个div 水平置中，是很常见到的需求，最多人使用margin: 0 auto这个方法就可以达成。但是，如果要让一个div 同时间做到在网页上水平置中还要垂直置中，也就是CSS 上下左右置中这就有点麻烦了，不太容易喔！
利用table中内容在单元格中默认垂直居中的特性。
2.利用css3中的transform属性
3.利用margin属性
4.利用利用position属性把left，top，right，bottom四个的值设为0，再用margin:auto
最好把你的代码改写了一下，并实现居中效果
效果图
这样：
body{ margin:0padding:0width:100%
height:100%
} div{ position:absolutetop:50%left:50%margin-top:-250px margin-left:-250px/*此时宽和高都要固定*/ width:500pxheight:500px} body{
margin:0
padding:0
width:100%
height:100%
}
div{
position:absolute
top:50%
left:50%
margin-top:-250px
margin-left:-250px
/*此时宽和高都要固定*/
width:500px
height:500px
}
扩展资料：注意事项
一、用两个值就可以了
1、text-align:center
//这是让文字左右居中
2、line-height:100px
//这是让文字垂直居中
vertical-align:middle
//这个属性不能让文字垂直居中，该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。
二、多行文本垂直居中分为两种情况，一个是父级元素高度不固定，随着内容变化；另一个是父级元素高度固定。
1、父级元素高度不固定
父级高度不固定的时，高度只能通过内部文本来撑开。可以通过设置内填充（padding）的值来使文本看起来垂直居中，只需设置padding-top和padding-bottom的值相等：
<!--html代码-->
<div id="div1">
这是多行文本垂直居中，
这是多行文本垂直居中，
这是多行文本垂直居中，
这是多行文本垂直居中。
</div>
/*css代码*/
#div1{
width: 300px
margin: 50px auto
border: 1px solid red
text-align: center/*设置文本水平居中*/
padding: 50px 20px
}
2、父级元素高度固定
只对拥有valign特性的元素才生效，结合display: table，可以使得div模拟table属性。因此可以设置父级div的display属性：display: table；然后再添加一个div包含文本内容，设置其display:table-cell和vertical-align:middle。
