CSS 9种办法实现不定宽高的垂直水平居中（干货）-百分百源码网

CSS 9种办法实现不定宽高的垂直水平居中（干货）

发布时间：09/01 来源：未知浏览：关键词：

有常见的 flex、transform、absolute 等等。也有 CSS3 的网格规划。还有伪元素的办法，是的，你没有看错，::after 和 ::before 也可以实现居中。

1、flex

大家的第一反响，大概就是 flex 了。由于它的写法够简便直不雅，兼容性也没什么问题。是手机端居中方式的首选。

<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-items，都设定为 center，即可实现居中。

需要留意的是，必然要把这里的 flex-center 挂在父级元素，才能使得其中独一的子元素居中。

2、flex + margin

这是 flex 办法的变种。父级元素设定 flex，子元素设定 margin: auto;。可以懂得为子元素被四周的 margin “挤” 到了中心。

<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、transform + absolute

这个组合，常用于图片的居中显示。

<div class="wrapper">
    <img src="test.png">
</div>

.wrapper {
    width: 300px;
    height: 300px;
    border: 1px solid #ccc;
    position: relative;
}
.wrapper > img {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

当然，也可以将父元素 wrapper 的相对定位，移入子元素 img 中，更换掉绝对定位。结果是一样的。

4、table-cell

利用 table 的单元格居中结果展现。与 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;，并设定 top、left、right、bottom 的值相等即可（不必然要都是 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、writing-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;
}

兼容性上还有些小瑕疵，但大部分阅读器，包罗手机端已支撑 writing-mode 的写法了。

7、grid

像表格一样，网格规划让我们能够按行或列来对齐元素。然而在规划上，网格比表格更大概做到或更简便。

<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;
}

但它在兼容性上不如 flex，特殊是 IE 阅读器，只支撑 IE10 及以上。

8、::after

伪元素也能用来实现居中么？感受还是挺奇妙的，看下面这个例子：

<div class="wrapper">
    <img src="test.png">
</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;
}

水平标的目的很好懂得。垂直标的目的，可以懂得为 ::after 把 img 往下拉到了中心。

9、::before

另一种是配合 font-size: 0; 共同施展的魔法。

<div class="wrapper">
    <img src="test.png">
</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 写法，所以不存在兼容性的风险。

引荐教程：《CSS教程》

以上就是CSS 9种办法实现不定宽高的垂直水平居中（干货）的具体内容，更多请关注百分百源码网其它相关文章！

打赏