當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

H5 水平居中水平垂直居中

發布時間：2024/3/12 编程问答 25 豆豆

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

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

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

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

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

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

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

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

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

? 2.相對與絕對定位水平垂直居中：再給子級元素設置 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 : 確保元素有一固定寬高，再給元素設置一個 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 布局：最常見的一種布局方式，屬性自由多變。給元素設置
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>

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

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

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。