水平居中

行内元素

如果被设置元素为文本、图片等行内元素时，水平居中是通过给父元素设置 text-align:center 来实现的。

块状元素

当被设置元素为 块状元素 时用 text-align：center 就不起作用了，这时也分两种情况：定宽块状元素和不定宽块状元素。

定宽块状元素：块状元素的宽度width为固定值。

满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的。

在实际工作中我们会遇到需要为“不定宽度的块状元素”设置居中，比如网页上的分页导航，因为分页的数量是不确定的，所以我们不能通过设置宽度来限制它的弹性。(不定宽块状元素：块状元素的宽度width不固定。)

不定宽块状元素：块状元素的宽度width不固定。

设置 position:relative 和 left:50%：利用 相对定位 的方式，将元素向左偏移 50% ，即达到居中的目的。

通过给父元素设置 float，然后给父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left: -50% 来实现水平居中。 

.container{ ???float:left; ???position:relative; ???left:50%} .container ul{ ???list-style:none; ???margin:0; ???padding:0; ???position:relative; ???left:-50%;}.container li{ ???float:left; ???display:inline; ???margin-right:8px;}

<div class="container"> ???<ul> ???????<li><a href="#">1</a></li> ???????<li><a href="#">2</a></li> ???????<li><a href="#">3</a></li> ???</ul></div>

垂直居中

父元素高度确定的单行文本

父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的 height 和 line-height 高度一致来实现的。(height: 该元素的高度，line-height: 顾名思义，行高（行间距），指在文本中，行与行之间的 基线间的距离 )。

父元素高度确定的多行文本

给父元素设置line-height等于高度值，font-size设置为0，对多行文本添加一个div父元素，改元素设置display：inline-block；vertical-align：middle；并且重新设置font-size和line-height，因为这两个属性会继承父元素的值。

.out { ???border:1px solid red; ???line-height: 200px; ???height:200px; ???font-size:0; ???text-align: center;}.inner { ???display: inline-block; ???vertical-align: middle; ???font-size:14px; ???line-height: 20px;}

<div class="out"> ???<div class="inner"> ???????<p>111</p> ???????<p>222</p> ???</div></div>

 css3的flex布局，使得居中问题变得更简单了，随着对flex布局的熟悉和了解，后续会不断完善这一部分内容。

css居中方法小结

原文地址：http://www.cnblogs.com/happypayne/p/7535134.html