CSS垂直和水平居中可变宽度和高度（最全9种方式）

terry 2年前 (2023-09-27) 阅读数 60 #数据结构与算法

垂直居中是CSS中的常见问题，在面试中经常提到。那么，今天我们就来谈谈9种居中的方法。

一般有flex、transformation、absolute等。还有 CSS3 网格布局。还有伪元素方法。是的，你没有看错，::after和::before也可以实现居中。

9 种显示方式

1。灵活

每个人的第一反应可能都是灵活。因为写法简单而且相当直观，而且不存在兼容性问题。是以手机为主的首选。

<div class="wrapper flex-center">
    <p>horizontal and vertical</p>
</div>
复制代码

.wrapper {
    width: 300px;
    height: 300px;
    border: 1px solid #ccc;
}

.flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}
复制代码

使用2个主要属性：justify-content和align-item，两者都设置为中心。

需要注意的是，flex-center必须挂在父元素上，这样只有一个子元素才能居中。

`2。 flex + margin`

这是 flex 方法的变体。父元素设置为flex，子元素设置为margin: auto;。可以理解为child的元素被周围的边缘“压”在中间。

<div class="wrapper">
    <p>horizontal and vertical</p>
</div>
复制代码

.wrapper {
    width: 300px;
    height: 300px;
    border: 1px solid #ccc;

    display: flex;
}

.wrapper > p {
    margin: auto;
}
复制代码

`3。变换 + 绝对`

此组合通常用于使图像居中。

<div class="wrapper">
    <img >
</div>
复制代码

.wrapper {
    width: 300px;
    height: 300px;
    border: 1px solid #ccc;
    position: relative;
}

.wrapper > img {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
复制代码

当然，你也可以将父元素包装的相对位置移动到img子元素上，改变绝对位置。效果一样。

`4。 table-cell`

使用表格单元格居中效果进行显示。和flex一样，应该写在父元素中。

<div class="wrapper">
    <p>horizontal and vertical</p>
</div>
复制代码

.wrapper {
    width: 300px;
    height: 300px;
    border: 1px solid #ccc;

    display: table-cell;
    text-align: center;
    vertical-align: middle;
}
复制代码

5。 Absolute + 四个方向相同的值

使用绝对位置布局，设置margin:auto;，将上、左、右、下值设置为平等的。（不一定全为 0）。

<div class="wrapper">
    <p>horizontal and vertical</p>
</div>
复制代码

.wrapper {
    width: 300px;
    height: 300px;
    border: 1px solid #ccc;
    position: relative;
}

.wrapper > p {
    width: 170px;
    height: 20px;
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
复制代码

此方法一般用于弹出层，必须设置弹出层的宽度和高度。

`6。 write-mode`

该方法可以改变文本显示方向，例如使文本垂直显示。

<div class="wrapper">
    <div class="wrapper-inner">
        <p>horizontal and vertical</p>
    </div>
</div>
复制代码

.wrapper {
    width: 300px;
    height: 300px;
    border: 1px solid #ccc;

    writing-mode: vertical-lr;
    text-align: center;
}

.wrapper > .wrapper-inner {
    writing-mode: horizontal-tb;
    display: inline-block;
    text-align: center;
    width: 100%;
}

.wrapper > .wrapper-inner > p {
    display: inline-block;
    margin: auto;
    text-align: left;
}
复制代码

兼容性方面还存在一些小缺陷，但是包括手机在内的大部分浏览器都已经支持书写模式下的书写了。

`7、网格`

就像表格一样，网格布局允许我们按行或列对齐元素。然而，就布局而言，网格与表格一样简单甚至更简单。

<div class="wrapper">
    <p>horizontal and vertical</p>
</div>
复制代码

.wrapper {
    width: 300px;
    height: 300px;
    border: 1px solid #ccc;

    display: grid;
}

.wrapper > p {
    align-self: center;
    justify-self: center;
}
复制代码

但是在兼容性方面就没有那么灵活了，尤其是IE浏览器，只支持IE10及以上版本。

`8。 ::after`

伪元素也可以用来实现居中吗？感觉有点神奇，看下面的例子：

<div class="wrapper">
    <img >
</div>
复制代码

.wrapper {
    width: 300px;
    height: 300px;
    border: 1px solid #ccc;

    text-align: center;
}

.wrapper::after {
    content: '';
    display: inline-block;
    vertical-align: middle;
    height: 100%;
}

.wrapper > img {
    vertical-align: middle;
}
复制代码

水平方向很容易理解。垂直方向上，可以理解为：：将img向下拉到中心后。

`9，::before`

另一个是与字体大小：0；配合使用的奇迹。秘密

<div class="wrapper">
    <img >
</div>
复制代码

.wrapper {
    width: 300px;
    height: 300px;
    border: 1px solid #ccc;

    text-align: center;
    font-size: 0;
}

.wrapper::before {
    display: inline-block;
    vertical-align: middle;
    font-size: 14px;
    content: '';
    height: 100%;
}

.wrapper > img {
    vertical-align: middle;
    font-size: 14px;
}
复制代码

font-size: 0;是为了消除标签之间的间隙。另外，由于伪元素适应了最基本的CSS编写方式，因此不存在兼容性风险。