如何讓乙個元素水平垂直居中？

2021-09-26 05:10:08 字數 725 閱讀 7005

這問題大概分為兩種型別，看要求，元素有沒有被設定寬高

1.利用絕對定位

#box
2.先把元素的左上角定位到**點，在向左和上移動自身寬高的一半（使用margin）

#box
3.先把元素的左上角定位到**點，在向左和上移動自身寬高的一半（使用transform平移）

#box
4.先把元素的左上角定位到**點，在向左和上移動自身寬高的一半（使用calc計算）

#box
4.如果有父元素，可以用flex彈性模型

#father
1.transform支援百分比

#box
2.如果有父元素，依然可以用flex彈性模型

#father
3.早期寫法，相容最佳。自動子元素的面積是父元素的四分之一

#box
常用的大概就這麼多，也許還有我沒寫出來的，剩下的大家自己發掘。

css高階 04 如何讓乙個元素水平垂直居中？

老闆的手機收到乙個紅包，為什麼紅包沒居中？如何讓乙個子元素在父容器裡水平垂直居中？這個問題必考，在實戰開發中，也應用得非常多。你也許能順手寫出好幾種實現方法。但大部分人的寫法不夠規範，經不起千錘百鍊。換句話說 這些人也就面試的時候夸夸其談，但真的上戰場的時候，他們不敢這麼寫，也不知道怎麼寫最靠譜。這...

css讓元素水平垂直居中

利用flex布局 無需知道被居中元素的寬高 container利用absolute transform 無需知道被居中元素的寬高 設定父元素非 static 定位 container 子元素絕對定位，使用 translate的好處是無需知道子元素的寬高 如果知道寬高，也可以使用 margin 設定 ...

如何使元素垂直水平居中

在css中使元素垂直水平居中十分常見，那麼我來拋磚引玉，分享幾種我知道的方法 1.彈性盒方法 flex布局 元素 display flex justify content center align items center 2.定位 transform 父元素 position relative 子...