CSS居中对齐


阅读次数: 次   
字数：2.4k字 | 预计阅读时长：9分钟

image-20200816190928891

1 水平居中

1.1 内联元素水平居中

利用text-align: center就可以实现在块级元素的内联元素水平居中。此方法对内联元素(inline)，内联块(inline-block)、内联表(inline-table)，inline-flex元素水平居中都有效。

核心代码：

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

页面效果：

image-20200816094410001

1.2 块级元素水平居中

通过把固定宽度块级元素的margin-left和margin-right设为auto，就可以使块级元素水平居中。

核心代码：

1
2
3
.center-block {
    margin: 0 auto; // 如果auto设置的是两个方向的，则会平分剩余空间
}

如下图所示：子元素的宽度为100px，并没有完全占据父元素的宽度，父元素的宽度减去子元素的宽度就是剩余宽度，将会由左右外边距平分，因此实现了水平方向居中。

页面效果：

image-20200816103123543

1.3 多块级元素水平居中

1.3.1 利用inline-block

如果一行中有两个或两个以上的块级元素，通过设置块级元素的显示类型为inline-block和父容器的text-align属性从而使多个块级元素水平居中。

核心代码：

1
2
3
4
5
6
.container {
    text-align: center;
}
.inline-block {
    display: inline-block;
}

页面效果：

image-20200816104353033

细心的你可能会发现当前的效果有一些小瑕疵：三个子元素之间有空隙，且底部没有和父元素的底部对齐。

三个子元素之间的空隙是由于存在换行：

image-20200816105507382

底部没有和父元素的底部对齐，这是因为垂直方向上受到了一个属性默认值的影响，它就是vertical-align。vertical-aligin的默认值是baseline，即内联元素垂直方向上是以基线对齐。所谓基线，就是指小写字母x的底部。

我们添加一个小写字母x，就能清楚了

image-20200816105742990

1.3.2 利用display: flex

利用弹性布局(flex)，实现水平居中，其中justify-content用于设置弹性盒子在主轴方向上的对齐方式。

核心代码：

1
2
3
4
5
6
.flex-center {
    /* 父容器开启flex布局 */
    display: flex;
    /* justify-content定义项目在主轴上的对齐方式 */
    justify-content: center;
}

页面效果：

image-20200816113229455

使用flex布局不会存在换行导致的空隙

未知宽度的块级元素

2 垂直居中

2.1 单行内联(inline-)元素垂直居中

通过设置内联元素的高度(height)和行高(line-height)相等，从而使元素垂直居中。

核心代码：

1
2
3
4
#v-box {
	height: 120px;
    line-height: 120px;
}

页面效果：

image-20200816113920824

如下图所示：选中文字内容，可以看到些行文字的行高刚好占据父元素的高度，从而实现了垂直居中对齐。

image-20200816113905240

其实上面的表述存在问题，父元素真正是由文字的行高撑起来的，因此不用设置父元素高度，直接设置line-height的值，就可以做到撑开父元素，同时使得单行文字内容居中。

1
2
3
#v-box {
	line-height: 120px; // 需要父元素多高，行高就设置多高
}

2.2 多行元素垂直居中

2.2.1利用padding

当没有手动指定父元素高度时，可以利用padding来进行设置。

核心代码：

1
2
3
4
5
6
.wrapper {
    /* 设置水平居中 */
    text-align: center;
    /* 设置上下等内边框实现垂直居中 */
    padding: 10px 0;
}

image-20200825152232525

完整代码：

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
28
29
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .wrapper {
            /* 当没有设置父元素高度时 */
            padding: 20px 0;
            text-align: center;
            border: 2px dotted red;
        }
    </style>
</head>

<body>
    <!-- 1. 使用padding实现垂直居中 -->
    <div class="wrapper">
        <div class="content">
            <p>我是段落1</p>
            <p>我是段落2</p>
            <p>我是段落3</p>
        </div>
    </div>
</body>

</html>

2.2.2 利用表布局

利用表布局的vertical-align: middle可以实现子元素的垂直居中。

核心代码：

1
2
3
4
5
6
7
.center-table {
    display: table;
}
.v-cell {
    display: table-cell;
    vertical-align: middle;
}

页面效果：

2.2.3 利用“精灵元素”

利用“精灵元素”技术实现垂直居中，即在父容器内放一个100%高度的伪元素，让文本和伪元素垂直对齐，从而达到垂直居中的目的。

核心代码：

1
2


页面效果：

2.2.4利用flex布局

利用flex布局实现垂直居中，其中flex-direction: column定义主轴方向为纵向。因为flex布局是CSS3中定义，在较老的浏览器中存在兼容问题。

核心代码：

1
2
3
4
5
6
.center-flex {
    /* 父容器开启flex布局 */
    display: flex; 
    /* 设置项目在交叉轴上的对齐方式 */
    align-items: center;
}

页面效果：

image-20200816154014111

完整代码：

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
28
29
30
31
32
33
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .wrapper {
            display: flex;
            /* 定义主轴为纵向 */
            flex-direction: column;
            /* 实现垂直居中 */
            justify-content: center;
            /* 实现水平居中 */
            align-items: center;
            height: 200px;
            border: 2px dotted red;
        }

        .content {
            margin: 0 auto;
        }
    </style>
</head>

<body>
    <div class="wrapper">
        <p>段落1</p>
        <p>段落2</p>
</body>

</html>

2.3 块级元素垂直居中

2.3.1 固定高度的块级元素

我们知道居中元素的高度和宽度，垂直居中问题就很简单。通过绝对定位元素距离顶部50%，并设置margin-top向上偏移元素高度的一半，就可以实现垂直居中了。

核心代码：

1
2
3
4
5
6
7
8
9
10
11
.parent {
    position: relative;
}

.child {
	position: absolute;
    
    top: 50%;
    height: 100px;
    margin-top: -50%;
}

2.3.1 利用绝对定位+margin

对子元素开启绝对定位，利用绝对定位和margin可以实现元素的垂直居中对齐。

image-20200825210035133

完整代码：

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
28
29
30
31
32
33
34
35
36
37
38
39
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>固定高度的块级元素</title>
    <style>
        .parent {
            position: relative;
            height: 200px;
            border: 2px dotted red;

        }

        .child {
            position: absolute;
            /* 真实宽度： 200px + 10px*2 = 220px */
            width: 200px;
            /* 真实高度：80px + 10px*2 = 100px */
            height: 80px;
            padding: 10px;
            /* 相对于包含块宽度1516px * 50% = 718px */
            top: 50%;
            /* 相对于包含块高度200px * 50% = 100px */
            left: 50%;
            margin: -50px 0 0 -110px;
            background-color: lightpink;
        }
    </style>
</head>

<body>
    <div class="parent">
        <div class="child"></div>
    </div>
</body>

</html>

原理：

当子元素开启绝对定位后，垂直方向的top和bottom的百分比值相对于父元素的高度，水平方向的left和right的百分比值相对于父元素的宽度。

当没有设置top、left等值时，元素将处在父元素左上角（子元素的左上角是起始点）

image-20200825210925066

当设置top为50%时，也就是让子元素在垂直方向上下移父元素高度的一半，到达父元素垂直方向上的中间位置。

当设置left为50%时，也就是让子元素在水平方向上右移父元素宽度的一半，到达父元素水平方向上的中间位置。

最终，子元素的左上角就到达了父元素的中心点，如下图所示：

image-20200825211404094

但是，我们要的是子元素的中心点处于父元素的中心点，而非子元素的左上角处于父元素的中心点。

因此，接下来，要做的就是让子元素的中心点向父元素的中心点移动，直至重合，就可以了。那么该如何做呢？

我们可以让子元素在水平方向上向左移动自身宽度的一半，在垂直方向上向上移动自身高度的一半

如果我们知道子元素的具体大小，例如：

我们通过计算可知本例中的子元素

  • 宽度为200px + 10px*2 = 220px
  • 高度为80px + 10px*2 = 120px

我们便可以让水平方向的margin-left的值为-110px，让垂直方向的margin-top的值-50px，就可以让子元素的中心点移动到父元素的中心点，从而实现元素水平和垂直居中对齐了。

但如果，有的时候我们并不能直接知道子元素的大小，就算知道，还需要手动计算，非常麻烦。有没有一劳永逸的方法呢？接着往下看

2.3.2 利用绝对定位+平移变换

绝对定位的代码和前面一致，子元素不再通过margin手动计算，而是采用translate()。

当translate()的值为百分比时，它是相对于元素自身的，因此，我们通过让水平方向和垂直方向各平移-50%即可。

完整代码如下：

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
28
29
30
31
32
33
34
35
36
37
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>固定高度的块级元素</title>
    <style>
        .parent {
            position: relative;
            height: 200px;
            border: 2px dotted red;

        }

        .child {
            position: absolute;
            width: 200px;
            height: 80px;
            padding: 10px;
            /* 相对于包含块宽度1516px * 50% = 718px */
            top: 50%;
            /* 相对于包含块高度200px * 50% = 100px */
            left: 50%;
            transform: translate(-50%,-50%);
            background-color: lightpink;
        }
    </style>
</head>

<body>
    <div class="parent">
        <div class="child"></div>
    </div>
</body>

</html>

本文作者： CoderLeiShuo
本文链接：https://coderleishuo.github.io/lele/24724.html
版权声明： 本作品采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可。转载请注明出处！
知识共享许可协议
好的东西应该像粥，是用时间熬出来的—— CoderLeiShuo
赏

谢谢你请我吃糖果

支付宝
微信

扫一扫，分享到微信

微信分享二维码

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

姓名：乐乐<br>性别：男<br>爱好：保密<br>血型：A型<br> 星座：双子座<br>目标：实现自己的价值<br>喜欢的人：保密