1.水平居中
方法一：（分宽高定不定两种情况）
定宽高：需要谁居中，就给谁设margin:auto；使盒子（元素）自己居中
1 <style>
2 .father {
3 width: 500px;
4 height: 500px;
5 background-color: yellow;
6 }
8 .son {
9 width: 100px;
10 height: 100px;
11 background-color: pink;
12 margin:auto;
13 }
14 </style>
15
16 <div class="father">
17 <div class="son">我是块级元素</div>
18 </div>
不定宽高：默认子元素宽高和父元素一样，这时需要设置子元素display:inline-block;或display:inline；（即将其转化为行内块或行内元素，内容的高度会撑起子元素的高度），然后给父元素设置text-align:center;
1 <style>
2 .father {
3 width: 500px;
4 height: 500px;
5 background-color: yellow;
6 text-align: center;
7 }
8 .son {
9 background-color: pink;
10 display: inline;
11 }
12 </style>
13
14 <div class="father">
15 <div class="son">我是块级元素</div>
16 </div>
方法二：使用flex布局，在父元素上设置justify-content
1 <head>
2 <style>
3 .father{
4 width: 500px;
5 height: 500px;
6 background-color: red;
7 display: flex;
8 justify-content: center;
9 }
10 .son{
11 height: 100px;
12 width: 100px;
13 background-color: yellow;
14 }
15 </style>
16 </head>
17 <body>
18 <div class="father">
19 <div class="son">我是块级元素</div>
20 </div>
21 </body>
2.垂直居中
方法一：使用flex布局，在父元素上设置align-items
该属性定义flex子项在flex容器的当前行的纵轴方向上的对齐方式。
1 <style>
2 .father{
3 width: 500px;
4 height: 500px;
5 background-color: red;
6 display: flex;
7 align-items: center;
8
9 }
10 .son{
11 height: 100px;
12 width: 100px;
13 background-color: yellow;
14 }
15 </style>
16 </head>
17 <body>
18 <div class="father">
19 <div class="son">我是块级元素</div>
20 </div>
21 </body>
方法二：使用position定位布局
宽高已知的情况下，给父元素设置相对定位，子元素设置绝对定位；margin-top为子元素高度一半的取负
1 <style>
2 .father{
3 width: 500px;
4 height: 500px;
5 background-color: red;
6 position: relative;
7 }
8 .son{
9 height: 100px;
10 width: 100px;
11 background-color: yellow;
12 position: absolute;
13 left: 0;
14 bottom: 0;
15 right: 0;
16 top: 50%;
17 margin-top: -50px;
18 }
19 </style>
20 </head>
21 <body>
22 <div class="father">
23 <div class="son">我是块级元素</div>
24 </div>
25 </body>
方法三：使用table-cell布局，设置在父元素上，高度定不定都OK
1 <style>
2 .father{
3 width: 500px;
4 height: 500px;
5 background-color: red;
6 display: table-cell;
7 vertical-align: middle;
8 }
9 .son{
10 height: 100px;
11 width: 100px;
12 background-color: yellow;
13 }
14 </style>
15 </head>
16 <body>
17 <div class="father">
18 <div class="son">我是块级元素</div>
19 </div>
20 </body>
3.水平和垂直居中
方法一：使用position+margin
1 <style>
2 .father{
3 width: 500px;
4 height: 500px;
5 background-color: red;
6 position: relative;
7 }
8 .son{
9 height: 100px;
10 width: 100px;
11 background-color: yellow;
12 position: absolute;
13 top: 0;
14 right: 0;
15 bottom: 0;
16 left: 0;
17 margin: auto;
18 }
19 </style>
20 </head>
21 <body>
22 <div class="father">
23 <div class="son">我是块级元素</div>
24 </div>
25 </body>
方法二：使用position+transform，transform设置在子元素上
1 <style>
2 .father{
3 width: 500px;
4 height: 500px;
5 background-color: red;
6 position: relative;
7 }
8 .son{
9 height: 100px;
10 width: 100px;
11 background-color: yellow;
12 position: absolute;
13 top:50%;
14 left: 50%;
15 transform: translate(-50%,-50%);
16 }
17 </style>
18 </head>
19 <body>
20 <div class="father">
21 <div class="son">我是块级元素</div>
22 </div>
23 </body>
原文地址：https://www.cnblogs.com/Lotus3904/p/12081446.html
时间： 2024-10-06 14:39:34