命題：如下不定寬高的父元素與子元素
<div
class
="parent"
>
<
div
class
="child"
>demo
div>
div>
問題一：使子元素水平居中
方案1：
.child進行相容}.parent
優點：瀏覽器相容性好
缺點：子元素會繼承文字居中特性，故如不希望子元素中文字居中，可對子元素設定
方案2：
.child
優點：只需要對child進行設定
缺點：不相容ie6.7。可對結構進行改造，改成table標籤
方案3：
.parent.child
缺點：低版本ie6、7及8不支援transform，不同瀏覽器也可能有相容問題。
方案4：
// 1.parent
// 2
.parent
.child
缺點：低版本ie6、7及8不支援flex
問題二：使子元素垂直居中
方案1：
.parent
缺點：不相容ie6.7。可對結構進行改造，改成table標籤
方案2：
.parent.child
缺點：低版本ie6、7及8不支援transform，不同瀏覽器也可能有相容問題。
方案3：
.parent
缺點：低版本ie6、7及8不支援flex
問題三：使子元素垂直水平都居中
方案1：
.parent.child進行相容
}
方案2：
.parent.child
方案3：
.parent
缺點：相容性較差
總結：在解決類似問題時，要掌握各css特性，然後把問題進行分解，最後結合特性桌布解決。還要掌握各css的相容性
超級實用的CSS布局方案之水平垂直居中
1 使用absolute transform 1 原理 用法 原理 將水平居中時的absolute transform和垂直居中時的absolute transform相結合。詳見 水平居中的3 和垂直居中的2 見水平居中的3 和垂直居中的2 2 例項 demo parent position re...
CSS布局 水平垂直居中
題外話 這是乙個讓人抓狂的問題。html文件結構如下 實現效果 1.子元素已知寬高 給父容器設定相對定位 relative 子元素設定為絕對定位 absolute top left設定為50 margin top margin left分別設定為高寬的一半的負數。outer inner 2.子元素未...
CSS 布局 水平垂直居中
原理 首先利用 absolute 定位把容器塊左頂角對準瀏覽器中心，然後再使用 負 margin 把容器塊向左移動自身寬度的一半，向上移動自身高度的一半，即可以把容器塊的中心移到瀏覽器中心。優點 相容性好 缺點 需要知道寬高，不夠靈活 container原理 首先利用 absolute 定位把容器塊...