讓元素水平垂直居中的四種方法

2021-10-09 04:24:55 字數 598 閱讀 4316
將子元素的寬和高設定為百分數，如寬設定為 80%，則需要向 x 軸偏移 10%；那麼 translatex 為10/80 = 0.125，即 12.5%；如果高設定為 60%，則需要向 y 軸偏移 20%，那麼 translatey 為20/60 = 33%，即子元素需要設定 transfrom:translate(12.5%,33%)。
將父元素設定為 positon:fixed，然後上下左右都為 0；使其填滿整個螢幕；

子元素也設定為 positon:fixed，然後上下左右都為 0；margin 設定為 auto，實現水平垂直居中。
將父元素設定為 positon:fixed，然後上下左右都為 0；使其填滿整個螢幕

子元素也設定為 positon:fixed，然後上下各設為 50%；即位置到達中心點，但是元素也有高寬度，所以整體就偏移了，應當上下都回退25%的距離，即設定為 transform:translate(-50%,-50%)。

實現元素水平垂直居中的四種方法

一 使用 transform 與 position 結合 二 使用 position 定位和 偏移 屬性 三 使用 position 定位和 外邊距 屬性 四 使用 flex 彈性布局 主要利用transform屬性實現上下左右居中 css部分 demohtml部分 頁面效果展示 主要利用absol...

水平垂直居中的四種方法

lang en charset utf 8 水平垂直居中title color center container1 container1 center container2 container2 center container3 container3 center container4 style...

讓乙個元素垂直水平居中的四種方法

第一種方法 div.box weight 200px height 400px position absolute left 50 top 50 margin left 100px margin top 200px 相容性好 缺點 必須知道元素的寬高 第二種方法 div.box weight 200...