lang
="en"
>
>
charset
="utf-8"
>
>
水平垂直居中title
>
>
.color
.center
.container1
.container1 .center
.container2
.container2 .center
.container3
.container3 .center
.container4
style
>
head
>
>
>
水平垂直居中h2
>
>
一、使用absolute和translateh4
>
>
注意絕對定位移動時，原點位置在 左上角；p
>
>
而 translate 移動時，原點位置在 元素正中心。且y軸正向垂直向下p
>
class
="container1 color"
>
class
="center"
>
div>
div>
>
二、使用absolute 和 margin(自身)h4
>
>
絕對定位中，真正移動的top值是top和marin-top的疊加
p>
>
結合使用absolute和margin：此時先移動父元素長度的50%（absolute），再根據中間塊的長度(margin)移動。這樣如果父元素大小改變，中間塊仍然居中。
所以不能直接寫 top: 50px; left: 50px;p
>
class
="container2 color"
>
class
="center"
>
div>
div>
>
三、使用absolute 和 margin(auto)h3
>
>
使用絕對定位，離上下左右多遠（此題都設0），然後讓margin自動填充p
>
class
="container3 color"
>
class
="center"
>
div>
div>
>
四、使用flexh3
>
>
父元素flex布局，並設定justify-content: center; align-items: center; 不要寫在中間塊啊，是父元素啊p
>
class
="container4 color"
>
class
="center"
>
div>
div>
body
>
html
>
讓元素水平垂直居中的四種方法
將子元素的寬和高設定為百分數，如寬設定為 80 則需要向 x 軸偏移 10 那麼 translatex 為10 80 0.125，即 12.5 如果高設定為 60 則需要向 y 軸偏移 20 那麼 translatey 為20 60 33 即子元素需要設定 transfrom translate 1...
實現元素水平垂直居中的四種方法
一 使用 transform 與 position 結合 二 使用 position 定位和 偏移 屬性 三 使用 position 定位和 外邊距 屬性 四 使用 flex 彈性布局 主要利用transform屬性實現上下左右居中 css部分 demohtml部分 頁面效果展示 主要利用absol...
垂直水平居中的四種方式
方案1 position 元素已知寬度 父元素設定為 position relative 子元素設定為 position absolute 距上50 據左50 然後減去元素自身寬度的距離就可以實現 效果圖 方案2 position transform 元素未知寬度如果元素未知寬度，只需將上面例子中的...