在開發過程中，很多需求需要我們居中一個div，比如html文檔流當中的一塊div，比如彈出層內容部分這種脫離了文檔流等。不同的情況有不同的居中方式，接下來就分享下一下幾種常用的居中方式。
1.text-align:center方式
代碼：
|
1
2
3
4
5
|
<
div
class="center">
<
span
class="center_text">
123
</
span
>
</
div
>
|
.center{
text-align:center;
}
center_text{
display:inline-block;
width:500px
}
這種方式可以水平居中塊級元素中的行內元素，如inline，inline-block；
但是如果用來居中塊級元素中的塊級元素時，如div中的div，一旦內層的div有自己的寬度，這種方法就會失效。只能讓里面div的文字等內容居中，而div仍然是左對齊的。
還有一種情況，當內部的元素脫離了文檔流，display:absolute的情況下，不管是否是塊級元素，都會居中，但是這種居中不是基於內部div的內容的，而是內部div最左端，內部div的最左端在div的中間（前提外部div設置了position:relative/absolute/fixed）；
2.margin:0 auto方式
代碼：
|
1
2
3
4
5
|
<
div
class="center">
<
span
class="center_text">
我是塊級元素，我是塊級元素，我給自己設了display：block
</
span
>
</
div
>
|
|
1
2
3
4
|
center_text{
display
:
block
;
width
:
500px
<br> margin：
0
auto
；
}
|
這種對齊方式要求內部元素(.content_text)是塊級元素，並且不能脫離文檔流（如設置position:absolute）,否則無效。
3.脫離文檔流的居中方式。
這種通常應用在自定義彈框當中，把背景層設置成透明灰色，內容居中顯示在最前面。
代碼：
|
1
2
3
4
|
<
div
class="mask">
<
div
class="content"><
br
> 我是要居中的板塊
</
div
>
</
div
>
|
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
.mask{
display
:
block
;
position
:
fixed
;
top
:
0
;
left
:
0
;
width
:
100%
;
height
:
100%
;
background
:
#000
;
filter: alpha(opacity=
30
);
-ms-filter:
"alpha(opacity=30)"
;
opacity: .
3
;
z-index
:
10000
;
}
.
center
{
display
:
block
;
position
:
fixed
;
_position
:
absolute
;
top
:
50%
;
left
:
50%
;
width
:
666px
;
height
:
400px
;
margin-left
:
-333px
;
margin-top
:
-200px
;
z-index
:
10001
;
box-shadow:
2px
2px
4px
#A0A0A0
,
-2px
-2px
4px
#A0A0A0
;
background-color
:
#fff
;
}
|
效果：
這種居中方式，把內部div設置寬高之后，再設置top、left各為50%，設置完之后，這里是按照左端居中的，接着我們使用負邊距的方式調整，將margin-top設置為負的高度的一半，margin-left設置為負的寬度的一半，就可以居中了。
這種方式還有一種居中方法就是設置margin：-（內部div高度的一半） auto；這用就不用設置left的值了。
4.display:table-cell
display:table-cell配合width，text-align:center,vertical-align:middle讓大小不固定元素垂直居中,這個方式將要對其的元素設置成為一個td，float、absolute等屬性都會影響它的實現，不響應margin屬性;
代碼：
|
1
2
3
4
|
<
div
class="center">
<
div
class="center_text">
1111111<
br
> </
div
>
</
div
>
|
|
1
2
3
4
5
6
7
8
9
|
.
center
{
display
: table;
width
:
100%
;
}
.center_text {
display
:
table-cell
;
text-align
:
center
;
vertical-align
:
middle
;
}
|
5.垂直居中
行內元素的垂直居中把height和line-height的值設置成一樣的即可。
代碼：
|
1
2
3
4
|
<
div
class="center">
<
span
class="center_text">
我是要居中的內容<
br
> </
span
>
</
div
>
|
|
1
2
3
|
center
{
height：
40px
;
line-heigth:
40px
;<br>}
|
這樣內部的span標簽就可以居中了。
6.使用css3的translate水平垂直居中元素
代碼：
|
1
2
3
|
<
div
class="center">
<
div
class="center_text">
我是要居中的內容<
br
> </
div
> <
br
></
div
>
|
|
1
2
3
4
5
6
7
8
9
10
11
|
.
center
{
position
:
relative
;
height
:
500px
;}
.center_text{
position
:
absolute
;
top
:
50%
;
left
:
50%
;
transform: translate(
-50%
,
-50%
);
width
:
300px
;
height
:
600px
;
}
|
這種方式將脫離文檔流的元素，設置top：50%，left：50%，然后使用transform來向左向上便宜半個內元素的寬和高。
7.使用css3計算的方式居中元素calc
代碼：
|
1
2
3
4
|
<
div
class="center">
<
div
class="center_text">
我是要居中的內容<
br
> </
div
>
</
div
>
|
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
.
center
{
position
:
relative
;
height
:
300px
;
width
:
1000px
;
border
:
1px
solid
#ccc
;
}
.center_text{
position
:
absolute
;
top
: calc(
50%
-
50px
);
left
: calc(
50%
-
150px
);
width
:
300px
;
height
:
100px
;
border
:
1px
solid
#000
;
}
|
效果：
這種方式同樣是將脫離文檔流的元素，然后使用計算的方式來設置top和left；
8.開啟了定位的元素，相對於父元素的水平居中，垂直居中（已經確定寬和高）
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
9.
開啟了定位的元素，相對於父元素的水平居中，垂直居中（不管寬和高有沒有設置）
position: absolute;
transform: translateX(-50%);
transform: translateY(-50%);
left: 50%;
top: 50%;
以上是幾種居中的方式，前3種是比較常用的，只要了解原理，后幾種都是這個原理的不同實現方式。
轉載文章；https://www.cnblogs.com/zhangwenjiajessy/p/6130658.html