當前位置：
首頁 >
移动端利用-webkit-box水平垂直居中
發布時間：2025/3/20
58
豆豆
生活随笔
收集整理的這篇文章主要介紹了
移动端利用-webkit-box水平垂直居中
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
首先，必須要在父元素上用display:-webkit-box.
?
一、box的屬性：
1.box-orient?用于父元素，用來確定父容器里子容器的排列方式，是水平還是垂直。
horizontal在水平行中從左向右排列子元素；vertical從上向下垂直排列子元素。
horizontal:? ??vertical:
<!DOCTYPE html><html lang="en"> <head><meta charset="UTF-8"><title>webkit-box</title><style>.father{display: -webkit-box;-webkit-box-orient:horizontal;background-color: #f4f4f4;height: 800px;}
/*vertical*/.father{display: -webkit-box;-webkit-box-orient:vertical;background-color: #f4f4f4;height: 800px;}
.child1{background-color: red;color: #f4f4f4;font-size: 100px;}.child2{background-color: yellow;color: green;font-size: 200px;}.child3{background-color: blue;color: #f4f4f4;font-size: 100px;}</style> </head> <body> <div class="father"><div class="child1">1</div><div class="child2">2</div><div class="child3">3</div> </div> </body> </html>
2.box-pack 用于父元素，用來確定父容器里子容器的水平對齊方式。
start水平居左對齊；end水平居右對齊；center水平居中；justify兩端對齊。
start:? ??end:?
center:? ? ?justify:
.father{display: -webkit-box;-webkit-box-orient:horizontal;-webkit-box-pack: center;background-color: #f4f4f4;height: 800px;}3.box-align 用于父元素，用來確定父容器里子容器的垂直對齊方式。
start居頂對齊；end居底對齊；center垂直居中；stretch拉伸到與父容器等高。
start:? ? end:
center:? ? stretch:
.father{display: -webkit-box;-webkit-box-orient:horizontal;-webkit-box-align: stretch;background-color: #f4f4f4;height: 800px;}4.box-flex 用于子元素，用來讓子容器針對父容器的寬度按一定規則進行劃分。
.father{display: -webkit-box;-webkit-box-orient:horizontal;-webkit-box-align: stretch;background-color: #f4f4f4;height: 800px;}.child1{background-color: red;color: #f4f4f4;font-size: 100px;-webkit-box-flex: 1;}.child2{background-color: yellow;color: green;font-size: 200px;-webkit-box-flex: 2;}.child3{background-color: blue;color: #f4f4f4;font-size: 100px;-webkit-box-flex: 3;}?
二、水平垂直居中
.father{display: -webkit-box;-webkit-box-orient:horizontal;-webkit-box-pack: center;-webkit-box-align: center;background-color: #f4f4f4;height: 800px;}.child1{background-color: red;color: #f4f4f4;font-size: 100px;}.child2{background-color: yellow;color: green;font-size: 200px;}.child3{background-color: blue;color: #f4f4f4;font-size: 100px;}?
轉載于:https://www.cnblogs.com/mywaystrech/p/4849260.html
與50位技術專家面對面20年技術見證，附贈技術全景圖總結
以上是生活随笔為你收集整理的移动端利用-webkit-box水平垂直居中的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： argz_create_sep函数
- 下一篇： VMware vSphere Clien