元素居中的几种方法

本文只讨论元素宽高未知的情况。元素宽高未知指的是在居中的过程中,不依赖于元素的宽高。

通过position和margin

  • 通过margin就可以做到令元素水平居中。
  • 再通过position令元素脱离文档流(不脱离无法做到垂直居中),并设置toprightbottomleft均为0,就可以使得元素在垂直方向上也居中。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<div id="outer">
<div id="inner"></div>
</div>

<style type="text/css">
#outer {
width: 100px;
height: 100px;
position: relative;
border: 1px solid black;
}
#inner {
width: 50px;
height: 50px;
margin: auto;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
border: 1px solid red;
}
</style>

通过position和transform

  • 通过position将元素的左上角放到包含元素的中心。
  • 再通过transform将元素的中心移动到包含元素的中心。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<div id="outer">
<div id="inner"></div>
</div>

<style type="text/css">
#outer {
width: 100px;
height: 100px;
border: 1px solid black;
}
#inner {
width: 50px;
height: 50px;
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: 1px solid red;
}
</style>

通过flex

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div id="outer">
<div id="inner"></div>
</div>

<style type="text/css">
#outer {
width: 100px;
height: 100px;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid black;
}
#inner {
width: 50px;
height: 50px;
border: 1px solid red;
}
</style>


感谢您的阅读,如果发现文章中有错误或漏洞,请批评指正。
邮箱:aadonkeyz@gmail.com

0%