盒子水平垂直居中 3種方法

我用的三種方法，當然常用的還是通過彈性盒來實現，一般用於移動端的時候，另外兩種也可以，但在移動端使用彈性盒更方便，直接上**了。

<

!doctype html>
"en"
>
"utf-8"
>
"viewport" content=
"width=device-width, initial-scale=1.0"
>
document<
/title>
.box 
<
/style>
<
/head>
"box"
>
<
/div>
<
/body>
<
/html>

<

!doctype html>
"en"
>
"utf-8"
>
"viewport" content=
"width=device-width, initial-scale=1.0"
>
document<
/title>
.box 
<
/style>
<
/head>
"box"
>
<
/div>
<
/body>
<
/html>

<

!doctype html>
"en"
>
"utf-8"
>
"viewport" content=
"width=device-width, initial-scale=1.0"
>
document<
/title>
.box 
.box-z 
<
/style>
<
/head>
"box"
>
"box-z"
>
<
/div>
<
/div>
<
/body>
<
/html>

實現盒子水平垂直居中的10種方法

實現操作 父 子 缺點 需要知道子元素的寬高 優點 比較好理解，相容性好 實現操作 父 子 優點 相容性也很好 缺點 需要知道子元素的寬高 實現操作 父 子 詳解 這種方法top的百分比是基於元素的左上角，那麼在減去寬度與高度的一半就好了 calc 任何長度值都可以使用calc 函式進行計算 cal...

盒子垂直水平居中的七種方法

lang en charset utf 8 name viewport content width device width,initial scale 1.0 documenttitle parent child 居中關鍵 必須知道內外盒子的大小 center style head class p...

盒子垂直水平居中

1 定位 盒子寬高已知，position absolute left 50 top 50 margin left 自身一半寬度 margin top 自身一半高度 2 table cell布局 父級 display table cell vertical align middle 子級 margin...