首先將與的高度設定為100%(為演示父元素不定寬高的效果)，並清除的預設樣式。
html,body.set-parent,.dy-parent
.child
.dy-parent
margin: auto使水平居中，將子容器設定為relative以在不脫離文件流的情況下偏移50%，由於本身子容器占用一定寬高，會將其撐下，使用margin使其向上偏移。
若是子容器使用absolute定位，則父容器應設定為relative，否則會其相對於static定位以外的第乙個父元素進行定位，在本示例中會以瀏覽器為基準定位，此外absolute無法使用margin: auto水平居中。
position+margin相同，css3的transform使得div向上平移自身高度的50%。
calc函式，能夠進行動態計算。
flex布局可以說是布局神器，極其強大，絕大部分現代瀏覽器都相容性flex布局。
grid布局將網頁劃分成乙個個網格，可以任意組合不同的網格，做出各種各樣的布局，grid布局與flex布局有一定的相似性，都可以指定容器內部多個專案的位置。但是，它們也存在重大區別，flex布局是軸線布局，只能指定"專案"針對軸線的位置，可以看作是一維布局，grid布局則是將容器劃分成"行"和"列"，產生單元格，然後指定"專案"所在的單元格，可以看作是二維布局，可以認為grid布局比flex布局強大。
table中有vertical-align屬性設定垂直對齊方式。
CSS布局 水平垂直居中
題外話 這是乙個讓人抓狂的問題。html文件結構如下 實現效果 1.子元素已知寬高 給父容器設定相對定位 relative 子元素設定為絕對定位 absolute top left設定為50 margin top margin left分別設定為高寬的一半的負數。outer inner 2.子元素未...
CSS 布局 水平垂直居中
原理 首先利用 absolute 定位把容器塊左頂角對準瀏覽器中心，然後再使用 負 margin 把容器塊向左移動自身寬度的一半，向上移動自身高度的一半，即可以把容器塊的中心移到瀏覽器中心。優點 相容性好 缺點 需要知道寬高，不夠靈活 container原理 首先利用 absolute 定位把容器塊...
CSS水平垂直居中布局
在日常開發中，經常會遇到要求水平垂直居中效果 實現水平垂直居中也是面試高頻考點 水平垂直居中又分兩種情況 1.內容定寬高 2.內容不定寬高 內容定寬高1.絕對定位和負margin值 doctype html en utf 8 水平垂直居中效果 title box content style head...