css居中布局方法

margin:0 auto;

也就是將margin-left和margin-right屬性設定為auto，從而達到水平居中的效果。

text-align:center;

.center

利用padding和background-clip配合實現div的水平垂直居中：

"parent">
"children">

通過background-clip設定為content-box,將背景裁剪到內容區外沿，再利用padding設為外div減去內div的差的一半，來實現：

.parent .children

注意：高度必須定義，建議加 overflow: auto，防止內容溢位。

內容元素：position: fixed，z-index: 999，記住父容器元素position: relative

.center

百分比寬高，最大、最小寬度均可以，加 padding 也可以

.center

只要margin: auto; 在，內容塊將垂直居中，top, left, bottom, right 可以設定偏移。

.center

居中內容比父容器高時，防止溢位，加 overflow: auto （沒有任何 padding 時，也可以加 max-height: 100%;）。

.absolute-center.is-overflow

resize 屬性可以讓尺寸可調。設定 min- /max- 限制尺寸，確定加了 overflow: auto 。

.absolute-center.is-resizable

首先我們還是定義父子div：

"parent">
"children">

這裡我們利用將子div的margin-top設定為父div高度減去子div高度的一半，然後再通過overflow設定為hidden來觸發父div的bfc，less**如下：

@parentwidth
:200px;
@childrenwidth
:50px;
.parent
.children

利用position:absolute搭配top，left 50%，再將margin設為負值也可以對div進行水平垂直居中，首先還是需要定義父子div：

"parent">
"children">

然後設定相應的css：

.parent .children

其中的margin中的值為該div寬度的一半

一般的居中都是和text-align一樣，將包裝在乙個div中，將該div的text-align設為center即可。

有一種特殊的方式，利用了乙個進行佔位，以讓父容器獲得高寬，從而讓進行-50%偏移的能有乙個參照容器作百分比計算。優點是可以不知道的大小，隨便放張尺寸不超過父容器的上去都能做到居中，而且相容性好。**如下：

遇到不定寬的div，特別是響應式或者移動端的設計中。下面介紹一種不需要定寬的div水平垂直居中方法。

我是水平垂直居中噢！ .parent .children .children-inline

首先我們利用float，將需要居中的div的父div也就是children的寬度收縮，然後left:50%,將children的左邊與水平中線對齊。這個時候，還沒有真正居中，我們需要將children-inner左移動-50%，這樣就水平居中了。

再來說說垂直方向，先將children的top設為50%，然後其上邊和垂直中線對齊了，同樣，我們需要將children-inner上移動-50%。但是這個50%是計算不出來的，所以我們用到了transform : translate3d(0, -50%, 0);

這個方法非常好用噢。

最後來介紹一下css3中的display:flex來實現的水平垂直居中的方法。

我是通過flex的水平垂直居中噢！ html,body .parent .children