详解 CSS 居中布局技巧

Posted 2020-10-24 mhxy13867806343

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了详解 CSS 居中布局技巧相关的知识，希望对你有一定的参考价值。

水平居中元素：

方式一：CSS3 transform

 1 .parent {
 2 
 3     position: relative;
 4 
 5 }
 6 
 7 .child {
 8 
 9     position: absolute;
10 
11     left: 50%:
12 
13     transform: translateX(-50%);
14 
15 }

方式二：flex 布局

1 .parent {
2 
3     display: flex;
4 
5     justify-content: center;
6 
7 }

适用于子元素为浮动，绝对定位，内联元素，均可水平居中。

居中的元素为常规文档流中的内联元素(display: inline)

常见的内联元素有：span, a, img, input, label 等等

1 .parent {
2 
3     text-align: center;
4 
5 }

居中的元素为常规文档流中的块元素(display: block)

常见的块元素：div, h1~h6, table, p, ul, li 等等

方式一：设置 margin

 1 .parent {
 2 
 3     width: 100%;
 4 
 5 }
 6 
 7 .child {
 8 
 9     width: 600px;
10 
11     height: 50px;
12 
13     margin: 0 auto;
14 
15     background: #999;
16 
17 }

方式二：修改为 inline-block 属性

 1 .parent {
 2 
 3     text-align: center;
 4 
 5 }
 6 
 7 .child {
 8 
 9     display: inline-block;
10 
11 }
12 
13 .child {
14 
15     width: 100px;
16 
17     float: left;
18 
19     position: relative;
20 
21     left: 50%;
22 
23     margin-left: -50px;
24 
25 }

View Code

方式一：

 1 .parent {
 2 
 3     position: relative;
 4 
 5 }
 6 
 7 .child {
 8 
 9     position: absolute;
10 
11     width: 100px;
12 
13     left: 50%;
14 
15     margin-left: -50px;
16 
17 }

View Code

方式二：

 1 .parent {
 2 
 3     position: relative;
 4 
 5 }
 6 
 7 .child {
 8 
 9     position: absolute;
10 
11     width: 100px;
12 
13     left: 0;
14 
15     right: 0;
16 
17     margin: 0 auto;
18 
19 }

View Code

垂直居中元素：

方式一：CSS3 transform

 1 .parent {
 2 
 3     position: relative;
 4 
 5 }
 6 
 7 .child {
 8 
 9     position: absolute;
10 
11     top: 50%;
12 
13     transform: translateY(-50%);
14 
15 }

View Code

方式二：flex 布局

1 .parent {
2 
3     display: flex;
4 
5     align-items: center;
6 
7 }

View Code

适用于子元素为浮动，绝对定位，内联元素，均可垂直居中。

1 .text {
2 
3     line-height: 200px;
4 
5     height: 200px;
6 
7 }

View Code

方式一：

 1 .parent {
 2 
 3     position: relative;
 4 
 5 }
 6 
 7 .child{
 8 
 9     position: absolute;
10 
11     top: 50%;
12 
13     height: 100px;
14 
15     margin-top: -50px;
16 
17 }

View Code

方式二：

 1 .parent {
 2 
 3     position: relative;
 4 
 5 }
 6 
 7 .child{
 8 
 9     position: absolute;
10 
11     top: 0;
12 
13     bottom: 0;
14 
15     height: 100px;
16 
17     margin: auto 0;
18 
19 }

View Code

垂直居中元素：

 1 div {
 2 
 3     width: 100px;
 4 
 5     height: 100px;
 6 
 7     margin: auto;
 8 
 9     position: fixed;
10 
11     //absolute is ok
12 
13     top: 0;
14 
15     right: 0;
16 
17     bottom: 0;
18 
19     left: 0;
20 
21 }

View Code

优点：

不仅可以实现在正中间，还可以在正左方，正右方
元素的宽高支持百分比 % 属性值和 min-/max- 属性
可以封装为一个公共类，可做弹出层

浏览器支持性好

 1 .child {
 2 
 3     width: 100px;
 4 
 5     height: 100px;
 6 
 7     position: absolute;
 8 
 9     top: 50%;
10 
11     left: 50%;
12 
13     margin-left: -50px;
14 
15     margin-top: -50px;
16 
17 }

View Code

特点：
1. 良好的跨浏览器特性,兼容 IE6 - IE7
2. 灵活性差，不能自适应，宽高不支持百分比尺寸和 min-/max- 属性框框
3. ```
 1 .child {
 2 
 3     width: 100px;
 4 
 5     height: 100px;
 6 
 7     position: absolute;
 8 
 9     top: 50%;
10 
11     left: 50%;
12 
13     transform: translate(-50%, -50%);  
14 
15 }
```
  View Code
4. 特点：
  1. 内容可自适应，可以封装为一个公共类，可做弹出层可能干扰其他 transform 效果

1 .parent {
2 
3     display: flex;
4 
5     justify-content: center;
6 
7     align-items: center;
8 
9 }

View Code

这是 CSS 布局未来的趋势。Flexbox 是 CSS3 新增属性，设计初衷是为了解决像垂直居中这样的常见布局问题。

1 text {
2 
3     height: 100px;
4 
5     line-height: 100px;
6 
7     text-align: center;
8 
9 }

View Code

来源:详解 CSS 居中布局技巧

以上是关于详解 CSS 居中布局技巧的主要内容，如果未能解决你的问题，请参考以下文章