在web頁面布局中居中是我們常遇到的情況，而居中分為水平居中與垂直居中
文字的居中
css中對文字的居中做的非常友好，我們是需要text-align, line-height 兩個屬性就可以控制文字的水平以及垂直居中
<head
>
<
style
type
="text/css"
>
.text
style
>
head
>
<
body
>
<
div
class
="text"
>文字的水平垂直居中
div>
body
>
html
>
注意：line-height屬性控制文字的垂直方向居中時 只使用單行文字的情況，多行文字時不能採用次方法
元素的居中
在css 中對於元素的居中，相信寫過css的同學對於其中的垂直居中都覺得非常苦惱，下面我們來看下實現居中的幾種方法
方法一：
使用display:table-cell 來居中，通過display:table-cell 來把他模擬成乙個**的單元格，利用**的居中特性
<head
>
<
style
type
="text/css"
>
.parent
.child
style
>
head
>
<
body
>
<
div
class
="parent"
>
<
div
class
="child"
>元素的水平居中
div>
div>
body
>
html
>
注意：當前方法兼用 ie8+ 谷歌，火狐等
方法二：
使用絕對定位來居中，原理為設定定位元素的left與top為50%，但是這時候元素還不是居中的，因為座標計算是根據元素的左上角的頂點計算的
所以相對中間的位置偏移了元素寬度/高度一半的距離，不過我們只需要設定元素的margin-top,margin-left 為負值就行了，值為元素寬/高的一半
<head
>
<
style
type
="text/css"
>
.parent
.child
style
>
head
>
<
body
>
<
div
class
="parent"
>
<
div
class
="child"
>
div>
div>
body
>
html
>
注意： 此方法只能使用寬度高度已知的元素
方法三：
另一種絕對定位的方法
<head
>
<
style
type
="text/css"
>
.parent
.child
style
>
head
>
<
body
>
<
div
class
="parent"
>
<
div
class
="child"
>
div>
div>
body
>
html
>
注意：此方法也是只適用於有元素有固定寬高的情況，而且只支援ie9+ 谷歌，火狐等符合w3c標準的「現代瀏覽器」
css居中方法
水平居中 1 文字 等行內元素的水平居中 給父元素設定text align center可以實現文字 等行內元素的水平居中。2 確定寬度的塊級元素的水平居中 通過設定margin left auto 和margin right auto 來實現的。3 不確定寬度的塊級元素的水平居中 方法一 將需要居...
css居中方法詳解
第一種居中方式 使用margin auto 這應該是使用最多的居中方式了，但也有著侷限性，居中的元素需要設定寬度，而且是塊元素才行，並且只能實現水平居中，這個方法的原理是讓瀏覽器自動去計算左右邊距從而實現居中 big small第二種居中方式 使用text align center實現居中，這種居中...
CSS居中方法大全
內聯元素 text align center這個屬性會讓內聯子元素水平居中 塊級元素 margin left auto margin right auto 水平居中通用方法margin left 50 transform translatex 50 這個方法可以讓內聯元素自身居中，margin的百分...