html結構：
你好
.container
.text
text-align: center
對於行內元素，可以直接使用text-align: center來水平居中
.containermargin: 0 auto
對於寬度確定的塊級元素，可以使用margin: 0 auto來水平居中，原理和後面的絕對定位加margin: auto的原理類似，後面單獨結合總結。
.text如果不考慮相容性，很完美的方案：
.container顯然相容性有著問題的方案：
.container父元素相對定位，子元素絕對定位，並且使用transfrom移動自身寬度的-50%（如果子元素的高度已知也可以通過margin向左移動自身高度的一半
.container
.text
margin: auto
.container
.text
（1）vertical-align: middle
針對行內元素，並且需要有乙個兄弟行內元素，撐滿父元素：
.container:after
.text
line-height===height
讓父元素的height和line-height相等，一般適用於文字的居中
.containerpadding
適用于父元素高度不確定，或者說父元素高度是根據子元素高度確定的情況：
/* container 不能指定 height */
.container
.text
父元素相對定位，子元素絕對定位，並且使用transfrom移動自身高度的-50%（如果子元素的高度已知也可以通過margin向上移動自身高度的一半
.container
.text
如果不考慮相容性，很完美的方案：
.container顯然相容性有著問題的方案：
.containerdisplay: table-cell+vertical-align: middle
.container（8）絕對定位和margin: auto
.container
.text
.father
.child
當絕對定位的元素只定義了乙個方向屬性時（比如left），並且元素沒有利用width指定寬度，寬度是0；當同時指定了相反的兩個方向的屬性時且相等（left和right都為0），此時如果沒有指定width，則寬度會充滿父元素，自定寬度會沿著left擺放。
此時指定marign：
如果一側定值，一側auto，auto為剩餘空間大小
如果兩側均是auto，則平分剩餘空間，所以就居中了。
塊級元素利用margin: 0 auto水平居中的原理也是這樣。
html css 元素居中的方法
html元素 水平居中 於 其父級元素的方法 方法1 左右居中方法1 html,body,div wrap left right middle1 方法2 左右居中方法2 html,body,div wrap left right middle2 html元素 垂直居中 於 其父級元素的方法 上下居中...
HTML CSS常見的幾種垂直居中方式
2019 11 02 20 18 35 一丶什麼是垂直居中 指當前標籤在父級容器中垂直方向是居中顯示的 實現垂直居中的幾種方式 1.table cell vertical align 屬性配合使用 2.absolute transform 屬性配合使用 3.display align items 屬...
html css 關於浮動的方式
1.在 the standard flow中內容的高度可以support父元素的高度 2.在 the standard flow中浮動的元素can not support父元素的高度 1.清除浮動的方式 給前面乙個父元素設定高度 notice 在企業開發中能不寫就不寫高度，這種方式用的很少 清除浮動...