解读 CSS 布局之水平垂直居中-阿里云开发者社区

水平居中

align="center"

直接在标签对象内加align="center"即可让对象内图片横向水平居中显示

align="center"使用方法：

<div align="center">aaa</div>

text-align:center

<style> 
    .divcss5{text-align:center} 
</style> 
<div class="divcss5">aaa</div>

text-align是针对父元素进行设置,只能对图片，按钮，文字等行内元素(display为inline或inline-block等)起作用，起作用的首要条件是子元素必须没有被float影响。但要说明的是在IE6、7这两个奇葩的浏览器中，它是能对任何元素进行水平居中的

把margin设为auto

具体来说就是把要居中的元素的margin-left和margin-right都设为auto，此方法只能进行水平的居中，且对浮动元素或绝对定位元素无效

<style> 
    body{ text-align:center} 
    .div{ margin:0 auto;} 
</style> 
<div class="div">aaa</div>

使用display:table-cell来居中

表格中只要用到 td(或 th)元素的 align="center" 和 valign="middle" 这两个属性就可以完美处理,而且表格默认对它里面的内容进行垂直居中。在css中控制表格内容的居中可以使用 vertical-align:middle，至于水平居中，css中没有相对应的属性的,但在IE6、7中可以用text-align:center对表格里的元素设置，IE8+及谷歌、火狐等的text-align:center只对行内元素起作用，对块状元素无效

对于不是表格的元素，可以通过display:table-cell 来模拟成一个表格单元格，这样就可以利用表格很方便的居中特性了

<div style="display:table-cell;width:200px;height:200px;border:1px solid #ccc;">
    <div>aaa</div>
</div>

使用绝对定位来进行居中

此法只适用于那些我们已经知道它们的宽度或高度的元素。

绝对定位进行居中的原理是通过把绝对定位元素的left属性设为50%,此时元素并不居中，而是比向右偏了这个元素宽度的一半，需要使用一个负的margin-left把它拉回到居中的位置，这个负的margin值就取元素宽度的一半

使用这个方法的好处在于无论你是什么形式的内容都可以马上居中，而缺点就是必须对元素有确定的宽高值，否则的话可能就需要通过javascript来进行一些小计算了

<style>
.child{width:100px;height:100px;position:absolute;left:50%;margin-left:-50px;}
</style>
<div class="parent">
    <div class="child">aaa</div>
</div>

利用盒模型实现水平居中--padding填充

margin

绝对居中

<style>
.Center {width:100px; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; }
</style>
<div class="Center">aaa</div>

优点：支持跨浏览器，包括IE8-IE10。无需其他特殊标记，CSS代码量少。支持百分比%属性值和min-/max-属性。只用这一个类可实现任何内容块居中。不论是否设置padding都可居中（在不使用box-sizing属性的前提下）。内容块可以被重绘。完美支持图片居中。

缺点：必须声明宽度。建议设置overflow:auto来防止内容越界溢出。在Windows Phone设备上不起作用。

使用浮动配合相对定位来进行水平居中

<style>
    .parent{width:300px;height:200px;border:1px solid red;}
    .wraper{float:left;position:relative;left:50%;clear:both;}
    .child{border:1px solid blue;position:relative;left:-50%;white-spave:nowrap;}
</style>
<div class="parent">
    <div class="wraper">
        <div class="child">aaa</div>
    </div>
</div>

这个是浮动元素水平居中的解决方法，且我们不需要知道元素的宽度

浮动居中的原理是：把浮动元素相对定位到父元素宽度50%的地方后需要他里面的子元素再用一个相对定位，把那多出的自身一半的宽度拉回来，而因为相对定位正是相对于自身来定位的，所以自身一半的宽度只要把left 或 right 设为50%就可以得到了，因而不用知道自身的实际宽度是多少

优点是不用知道要居中的元素的宽度，即使这个宽度是不断变化的也行；缺点是需要一个多余的元素来包裹要居中的元素

使用button标签

<button>  
  <div>
    居中居中居中居中居中居中<br>
    居中居中居中居中居中居中
  </div>  
</button> 
<style> 
button{width: 400px;height: 200px;border:1px solid #f00;
  &:focus{outline:none;}
  div{display: inline-block;}
}
</style>

这种方法属于奇淫技巧，利用button标签天生外挂的这一技能对其里面的元素进行居中

flexbox

<div class="wrap"> 
    居中居中居中居中居中居中居中<br>
    居中居中居中居中居中居中居中
</div> 
<style> 
    .wrap{display: flex;align-items: center;justify-content: center;width: 400px;height: 200px;border:1px solid #f00;}
</style>

flexbox是个很强大的布局模块，三个属性就搞定居中，而且不论父容器还是居中元素都可以不定宽高

垂直居中

line-height

把文字的line-height设为文字父容器的高度，只适用于只有一行文字的情况

<div id="parent">
    <div id="child">Text here</div>
</div>
<style>
    #child { line-height: 200px; }
</style>

使用display:table-cell来居中

<div style="display:table-cell;vertical-align:middle;width:200px;height:200px;border:1px solid #ccc;">
    <div>aaa</div>
</div>

使用绝对定位来进行居中

此法只适用于那些我们已经知道它们的宽度或高度的元素。

绝对定位进行居中的原理是通过把绝对定位元素的top的属性设为50%,这个时候元素并不是居中的，而是比居中的位置向下偏了这个元素宽度或高度的一半的距离，所以需要使用一个负的margin-top的值来把它拉回到居中的位置，这个负的margin值就取元素宽度或高度的一半

<style>
.child{width:100px;height:100px;position:absolute;top:50%;margin-top:-50px;}
</style>
<div class="parent">
    <div class="child">aaa</div>
</div>

利用盒模型实现水平居中--padding填充

绝对居中

<style>
.Center { height:100px; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; }
</style>
<div class="Center">aaa</div>

优点：

支持跨浏览器，包括IE8-IE10。无需其他特殊标记，CSS代码量少。支持百分比%属性值和min-/max-属性。只用这一个类可实现任何内容块居中。不论是否设置padding都可居中（在不使用box-sizing属性的前提下）。内容块可以被重绘。完美支持图片居中。

缺点：

必须声明高度。建议设置overflow:auto来防止内容越界溢出。在Windows Phone设备上不起作用。

简而言之：绝对定位元素不在普通内容流中渲染，因此margin:auto可以使内容在通过top: 0; left: 0; bottom: 0;right: 0;设置的边界内垂直居中

使用button标签

<button>  
  <div>
    居中居中居中居中居中居中<br>
    居中居中居中居中居中居中
  </div>  
</button> 
<style> 
button{width: 400px;height: 200px;border:1px solid #f00;
  &:focus{outline:none;}
  div{display: inline-block;}
}
</style>

这种方法属于奇淫技巧，利用button标签天生外挂的这一技能对其里面的元素进行居中

flexbox

<div class="wrap"> 
    居中居中居中居中居中居中居中<br>
    居中居中居中居中居中居中居中
</div> 
<style> 
    .wrap{display: flex;align-items: center;justify-content: center;width: 400px;height: 200px;border:1px solid #f00;}
</style>

flexbox是个很强大的布局模块，三个属性就搞定居中，而且不论父容器还是居中元素都可以不定宽高