823
解讀 CSS 布局之水平垂直居中
水平居中
align="center"
直接在標簽對象內加align="center"即可讓對象內圖片橫向水平居中顯示
align="center"使用方法：
<div align="center">aaa</div>
text-align:center
<style>
.divcss5{text-align:center}
</style>
<div >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 >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 >
<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 >
<div >aaa</div>
</div>
利用盒模型實現水平居中--padding填充
margin
絕對居中
<style>
.Center {width:100px; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; }
</style>
<div >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 >
<div >
<div >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 >
居中居中居中居中居中居中居中<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 >
<div >Text here</div>
</div>
<style>
#child { line-height: 200px; }
</style>
使用display:table-cell來居中
<div >
<div>aaa</div>
</div>
使用絕對定位來進行居中
此法隻適用於那些我們已經知道它們的寬度或高度的元素。
絕對定位進行居中的原理是通過把絕對定位元素的top的屬性設為50%,這個時候元素並不是居中的，而是比居中的位置向下偏了這個元素寬度或高度的一半的距離，所以需要使用一個負的margin-top的值來把它拉回到居中的位置，這個負的margin值就取元素寬度或高度的一半
<style>
.child{width:100px;height:100px;position:absolute;top:50%;margin-top:-50px;}
</style>
<div >
<div >aaa</div>
</div>
利用盒模型實現水平居中--padding填充
絕對居中
<style>
.Center { height:100px; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; }
</style>
<div >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 >
居中居中居中居中居中居中居中<br>
居中居中居中居中居中居中居中
</div>
<style>
.wrap{display: flex;align-items: center;justify-content: center;width: 400px;height: 200px;border:1px solid #f00;}
</style>
flexbox是個很強大的布局模塊，三個屬性就搞定居中，而且不論父容器還是居中元素都可以不定寬高
最後更新：2017-06-22 10:32:08