當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

H5 水平居中水平垂直居中

發(fā)布時(shí)間：2024/3/12 编程问答 27 豆豆

生活随笔收集整理的這篇文章主要介紹了 H5 水平居中水平垂直居中小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

塊級元素可以設(shè)置高度，寬度，行內(nèi)元素則不能，如果將行內(nèi)元素變成行內(nèi)塊元素就可以設(shè)置寬高了，只需要將 display 屬性設(shè)置為 inline-block 即可;

? 1.行內(nèi)元素水平居中：給行內(nèi)元素的父級元素設(shè)置 text-align: center ;

? 2.塊級元素水平居中：確保塊級元素有一個(gè)寬度，給行內(nèi)元素設(shè)置 display: block ; 屬性，再給該元素設(shè)置 margin: 0 auto ;

? 3.相對與絕對定位水平居中：確保父級元素具有相對定位屬性 relative , 需要居中的子級元素具有絕對定位屬性 absolute 。再給子級元素設(shè)置 left: 50% ; transform: translateX(-50%) ;

? 4.使用 calc() 函數(shù)：看懂第3點(diǎn)方法，這第4點(diǎn)方法顯得有些雞肋了。這是在css3以前常見的方式。缺點(diǎn)很容易看出，寬度和減去的常量不能很好的動(dòng)態(tài)變化；

? 能夠理解上述水平居中，那么水平垂直居中就很容易理解，需要注意的就是如何垂直。

? 1.塊級元素水平垂直居中：給元素的父級元素設(shè)置具體高度 line-height 等于 height 高度

<view style="text-align: center; height: 100px; line-height:100px"><text>水平垂直居中</text> </view>

? 2.相對與絕對定位水平垂直居中：再給子級元素設(shè)置 left: 50% ; top: 50% ; transform: translate(-50%，-50%) ;

<body style="position: relative;"><view style="position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);">水平垂直居中</view> </body>

? 3. 固定定位中 left: 0 ; top: 0 ; right: 0 ; bottom: 0 : 確保元素有一固定寬高，再給元素設(shè)置一個(gè) margin: auto ;

<body><view style="position: fixed; top: 0; left: 0; right: 0; bottom: 0; margin: auto; width: 100px; height: 100px">水平垂直居中</view> </body>

? 4. flex 布局：最常見的一種布局方式，屬性自由多變。給元素設(shè)置
display: flex ; align-items: center; justify-content: center ;

<body><view style="display: flex; align-items: center; justify-content: center;width: 200px; height: 200px">水平垂直居中</view> </body>

常見，常用的水平居中，水平垂直居中的方法都在這了。當(dāng)然還有很多其它的方法，感興趣話可以去研究研究。

有疑惑的小伙伴，可能是我表達(dá)不清楚，可以留言討論，如有錯(cuò)誤，也希望大家不吝指出。

以上是生活随笔為你收集整理的H5 水平居中水平垂直居中的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。