【水平垂直居中布局】CSS实现水平垂直居中的5种方法（附源码）

news2024/12/24 2:09:16

文章目录

写在前面
涉及知识点
1、子绝对定位父相对定位，子节点设置位移实现
- 1.1效果
- 1.2实现源码
2、子绝对定位父相对定位，子节点设置上下边距
- 2.1 效果
- 2.2 实现源码
3、利用flex布局实现
- 3.1 效果
- 3.2 实现源码
4、利用行高和文本水平居中设置
- 4.1 效果
- 4.2 实现源码
5、子绝对定位父相对定位，设置外边距margin实现
- 5.1 效果
- 5.2 实现源码
6、源码分享
- 6.1 百度网盘
- 6.2 123网盘
- 6.3 邮箱留言
总结

写在前面

这个题目估计是所有面试的人都遇到过的，我也是6年没有挪过窝了，那时候一天去面试5/6家公司，当时真的是面对各种面试官的“毒打”，当然现在回想起来还是觉得很有意思，那么今天我就重点和大家说一下CSS子元素如何实现水平垂直居中（5种方法）。

涉及知识点

CSS水平垂直居中的五种方法，手把手教你如何实现水平垂直居中布局，水平居中，垂直居中，子容器如何水平垂直居中，flex布局实现垂直水平居中，相对绝对定位实现水平垂直居中。
版权声明：此文原创于CSDN博主-《拄杖盲学轻声码》，主页有很多分享的代码，期待您的访问。

其实以下5种CSS水平垂直居中主要的实现方式。
在这里插入图片描述

1、子绝对定位父相对定位，子节点设置位移实现

首先我们创建父子两个dom节点，然后给父节点设置相对定位，给子节点设置绝对定位，然后再设置top和left均为50%，然后再设置位移transform属性左右-50%。
效果如下：

1.1效果

如下棕灰色部分为父节点，蓝色部分为子节点
在这里插入图片描述

1.2实现源码

html源码

<div class="partdom">
    <div class="father father1">
        父节点1
        <div class="son1">子节点1</div>
    </div>
</div>

Css源码

.father {
    width: 100%;
    height: 100%;
    color: red;
    background-color: #dbd2ce;
}

.father1 {
    position: relative;
}

.son1 {
    position: absolute;
    width: 60px;
    height: 60px;
    background-color: #66ddee;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

2、子绝对定位父相对定位，子节点设置上下边距

其实这个和第一种方式是类似的，但是我们要知道的是相对定位对应的是盒子的开始位置，也就是左上角的位置，所以设置了50%之后我们得把本身的偏移量算上去才能完全水平垂直居中，如下所示效果与源码。

2.1 效果

实现效果如下所示：
在这里插入图片描述

2.2 实现源码

html源码

<div class="partdom">
    <div class="father father2">
        父节点2
        <div class="son2">子节点2</div>
    </div>
</div>

Css源码

.father2 {
    position: relative;
}

.son2 {
    position: absolute;
    width: 60px;
    height: 60px;
    background-color: #dd1122;
    top: 50%;
    left: 50%;
    margin-left: -30px;
    margin-top: -30px;
    color: #fff;
}

3、利用flex布局实现

其实这个主要是设置父节点为flex布局方式，然后通过设置justify-content属性和align-items属性来进行设置的，具体效果和代码如下。

3.1 效果

实现效果如下：
在这里插入图片描述

3.2 实现源码

html源码

<div class="partdom">
    <div class="father father3">
        <div class="son3">子节点3</div>
    </div>
</div>

Css源码

.father3 {
    display: flex;
    justify-content: center;
    align-items: center;
}

.son3 {
    width: 60px;
    height: 60px;
    background-color: #00a;
    color: #fff;
}

4、利用行高和文本水平居中设置

我们都知道设置文本的一些常用属性，尤其是设置文本居中我们用text-align:center，设置文本垂直居中我们会设置line-height设置50%等方式，那么今天我要说的是利用这两个属性实现dom节点水平垂直居中。
首先我们要设置子节点为行内块显示模式，由于对齐属性用的是文本的，所以我们要针对子节点设置vertical-align:middle属性，具体实现效果及代码如下所示。

4.1 效果

在这里插入图片描述

4.2 实现源码

html源码

<div class="partdom">
    <div class="father father4">
        <div class="son4">子节点4</div>
    </div>
</div>

Css源码

.father4 {
    text-align: center;
    line-height: 200px;
}

.son4 {
    display: inline-block;
    width: 60px;
    height: 60px;
    line-height: 30px;
    color: #fff;
    background-color: #66f;
    vertical-align: middle;
}

5、子绝对定位父相对定位，设置外边距margin实现

其实我们知道前面第一二种的人很多，这个方式的反而很少，设置完子绝对和父相对，只要把上下左右偏移设置为零，margin设置为自动即可，其中效果与源码如下所示。

5.1 效果

在这里插入图片描述

5.2 实现源码

html源码

<div class="partdom">
    <div class="father father5">
        <div class="son5">子节点5</div>
    </div>
</div>

Css源码

.father5 {
    position: relative;
}

.son5 {
    position: absolute;
    width: 60px;
    height: 60px;
    background-color: #66ddee;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}