CSS: 常用的元素居中方法
日常工作中常常會遇到元素居中的需求，通常塊級元素的水平居中只需左右margin設為auto即可。
而行間元素的居中則是由父級設定行高（等於父級高度）和 text-align（center）實現。
但是如果要求是塊級元素水平垂直居中呢？本文總結了一些常用的元素水平垂直居中方法。
absolute
1. 定位實現居中(需計算偏移值)
<
div
class
=
“absolute_p1”
>
<
div
class
=
“absolute_c1”
>
div
>
div
>
。
absolute_p1
{
position
：
relative
；
width
：
200
px
；
height
：
200
px
；
}
。
absolute_p1
。
absolute_c1
{
position
：
absolute
；
/* fixed 同理 */
left
：
50
%
；
top
：
50
%
；
width
：
100
px
；
height
：
100
px
；
margin-left
：
-50
px
；
margin-top
：
-50
px
；
/* 需根據寬高計算偏移量 */
}
原理： 透過定位使元素左上角居中，再透過偏移值margin調整使元素中心居中
缺點：高度寬度需事先知道，得透過其來計算負margin（好煩）
2. 定位實現居中(不需計算偏移值)
<
div
class
=
“absolute_p2”
>
<
div
class
=
“absolute_c2”
>
div
>
div
>
。
absolute_p2
{
position
：
relative
；
width
：
200
px
；
height
：
200
px
；
}
。
absolute_p2
。
absolute_c2
{
position
：
absolute
；
/* fixed 同理 */
left
：
0
；
top
：
0
；
bottom
：
0
；
right
：
0
；
/* 定位為 0 */
width
：
100
px
；
height
：
100
px
；
margin
：
auto
；
/* 不用計算偏移量 */
}
原理： 原理我也不知道啊！估計定位都給0了，元素自己也不知道該去哪兒，只好待在原地不知所措。。。
3. 定位實現居中(不需計算偏移值)
<
div
class
=
“absolute_p3”
>
<
div
class
=
“absolute_c3”
>
div
>
div
>
。
absolute_p3
{
position
：
relative
；
width
：
200
px
；
height
：
200
px
；
}
。
absolute_p3
。
absolute_c3
{
position
：
absolute
；
/* fixed 同理 */
left
：
50
%
；
top
：
50
%
；
width
：
100
px
；
height
：
100
px
；
transform
：
translate
（
-50
%
，
-50
%
）；
}
原理： 透過定位使元素左上角居中，再透過 translate 位移元素使之中心居中，由於 translate支援百分比，所以也就不用自己算偏移量了
缺點： ie 就別想用了
table
<
div
class
=
“table_p1”
>
<
div
class
=
“inner”
>
<
div
class
=
“table_c1”
>
div
>
div
>
div
>
。
table_p1
{
display
：
table
；
width
：
200
px
；
height
：
200
px
；
}
。
table_p1
。
inner
{
display
：
table
-
cell
；
vertical-align
：
middle
；
text-align
：
center
；
}
。
table_p1
。
table_c1
{
display
：
inline
-
block
；
width
：
100
px
；
height
：
100
px
；
}
原理： 透過 table-cell 的特性實現居中（table-cell的子元素應為行間元素）
table-cell 比較適合圖片牆這類佈局
缺點：
ie 。。。
用了這就和 margin/float/absolute 說拜拜吧
太麻煩
inline
<
div
class
=
“inline_p1”
>
<
div
class
=
“inline_c1”
>
div
>
div
>
。
inline_p1
{
width
：
200
px
；
height
：
200
px
；
text-align
：
center
；
line-height
：
200
px
；
/* 行間元素的垂直居中 */
}
。
inline_p1
。
inline_c1
{
display
：
inline
；
font-size
：
0
；
/* 透過內容撐開寬高 */
padding
：
50
px
；
}
原理： 行間元素的居中方法
缺點： 不靈活
偽元素
<
div
class
=
“before_p1”
>
<
div
class
=
“before_c1”
>
div
>
div
>
。
before_p1
{
width
：
200
px
；
height
：
200
px
；
font-size
：
0
；
/* 必須要設定 */
}
。
before_p1
：：
before
{
display
：
inline
-
block
；
content
：
‘’
；
height
：
100
%
；
vertical-align
：
middle
；
}
。
before_p1
。
before_c1
{
display
：
inline
-
block
；
width
：
100
px
；
height
：
100
px
；
vertical-align
：
middle
；
}
原理： 透過偽元素（高度100%）為參照使 。before_c1 垂直居中
要點： 。before_p1 的 font-size，需設為 0，否則內部會由於偽元素的 content 大小而產生偏移
所以 。before_c1 中有文字時，需另設 font-size
缺點： 太麻煩，為了居中而居中
box flexbox
1. box 1
<
div
class
=
“box_p1”
>
<
div
class
=
“box_c1”
>
div
>
div
>
。
box_p1
{
display
：
-webkit-
box
；
-webkit-
box-pack
：
center
；
-webkit-
box-align
：
center
；
width
：
200
px
；
height
：
200
px
；
}
。
box_p1
。
box_c1
{
width
：
100
px
；
height
：
100
px
；
}
缺點： 改用 flex 吧
2. box 2
<
div
class
=
“box_p2”
>
<
div
class
=
“box_c2”
>
div
>
div
>
。
box_p2
{
display
：
flex
；
justify-content
：
center
；
align-items
：
center
；
width
：
200
px
；
height
：
200
px
；
}
。
box_p2
。
box_c2
{
width
：
100
px
；
height
：
100
px
；
}
1。 缺點： 除了相容性還有其他缺點麼？
其他
demo預覽
demo程式碼
筆記