集める価値のある CSS で水平方向と垂直方向の中央揃えを実現する 10 の方法のまとめ

この記事では、CSS で水平方向と垂直方向の中央揃えを実現するための 10 の方法をまとめました。必要な方は参考にしてください。

重要なポイントをマークしてください。これは面接で必ず聞かれる質問です。#​​

## 上の図の効果を実現するのは非常に簡単そうに見えますが、実際には隠された秘密があります。この記事では、CSS で水平方向と垂直方向の中央揃えを実現するための次の方法をまとめて紹介します。

中央揃えの要素のみ幅と高さが適用されます

• 絶対的な負のマージン

• 絶対的なマージン自動

##absolute calc
中央に配置された要素の幅と高さは可変です

絶対変換
lineheight
writing-mode
table
css-table
flex
#grid
絶対的マイナスマージン

を達成するには上記の効果を得るために、いくつかの準備作業を行ってみましょう。HTML コードは次のとおりで、親要素と子要素の合計 2 つの要素があるとします。

<div>
    <div>123123</div>
</div>

wp は親要素のクラス名、box はクラス名です。子要素のクラス名、固定幅と可変幅の違いがあるため、サイズは指定された幅を示すために使用されます。以下はすべてです。すべての効果に使用される共通のコードは、主に色と幅と高さを設定することです

注: この共通コードは後で繰り返されません。対応するプロンプトのみが表示されます。

#

/* 公共代码 */
.wp {
    border: 1px solid red;
    width: 300px;
    height: 300px;
}

.box {
    background: green;    
}

.box.size{
    width: 100px;
    height: 100px;
}
/* 公共代码 */

絶対位置のパーセンテージは、この機能により、子要素を中央に表示できますが、絶対的な配置は子要素の左上隅に基づいて行われます。

という効果が得られます。この問題を解決するには、マージンの負の値を使用して、サブ要素のマージンをサブ要素の幅の半分の負の値として指定することで、要素を反対方向に配置できます。要素、サブ要素を中央に配置できます。CSS コードは次のとおりです。

/* 此处引用上面的公共代码 */
/* 此处引用上面的公共代码 */

/* 定位代码 */
.wp {
    position: relative;
}
.box {
    position: absolute;;
    top: 50%;
    left: 50%;
    margin-left: -50px;
    margin-top: -50px;
}

これは、私がよく使用する方法です。この方法は理解しやすく、互換性が高いです。子要素の幅と高さを確認します。

クリックして完全なデモを表示します。

絶対マージン自動

このメソッドでは、中央に配置された要素の幅と高さも必要です。 HTML コードは次のとおりです。

<div>
    <div>123123</div>
</div>

このメソッドは、各方向の距離を 0 に設定します。このとき、マージンを自動に設定すると、すべての方向の中央に配置できます。

/* 此处引用上面的公共代码 */
/* 此处引用上面的公共代码 */

/* 定位代码 */
.wp {
    position: relative;
}
.box {
    position: absolute;;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

このメソッドは互換性も高く、子要素の幅と高さを知る必要があるという欠点もあります。

クリックすると完全な DEMO

絶対計算

が表示されます。

このメソッドでは、中央に配置された要素の幅と高さを固定する必要があるため、HTML コードは次のとおりです。

<div>
    <div>123123</div>
</div>

CSS3 は計算されたプロパティを提供します。上部のパーセンテージは要素の左上隅に基づいており、幅の半分を減算するだけです。 コードは次のとおりです。

/* 此处引用上面的公共代码 */
/* 此处引用上面的公共代码 */

/* 定位代码 */
.wp {
    position: relative;
}
.box {
    position: absolute;;
    top: calc(50% - 50px);
    left: calc(50% - 50px);
}

このメソッドの互換性は、calc の互換性に依存します。子要素の幅と高さを知る必要があります。

クリックすると、完全なデモ

絶対変換

または絶対配置が表示されますが、このメソッドには子要素は必要ありません。幅と高さを固定するため、サイズ クラスは必要ありません。HTML コードは次のとおりです。

<div>
    <div>123123</div>
</div>

絶対位置の問題を解決するには、CSS3 の新しい変換属性を使用することもできます。変換の幅と高さに相対的なパーセンテージを設定することもできるので、translate を -50% に設定すると、中央に配置できると言えます。コードは次のとおりです。このメソッドの互換性は、translate2d の互換性によって決まります。

クリックして完全なデモを表示します

lineheight

インライン要素の centering 属性を使用して、水平方向と水平方向を実現することもできます。 HTML コードは次のとおりです。

/* 此处引用上面的公共代码 */
/* 此处引用上面的公共代码 */

/* 定位代码 */
.wp {
    position: relative;
}
.box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

text-align

を使用してボックスをインライン要素として設定します。水平方向の中央揃えを実現しますが、多くの学生は垂直方向の中央揃えもできることを知らないかもしれません。

vertical-align

を使用した場合、コードは次のとおりです。

<div>
    <div>123123</div>
</div>

このメソッドでは、テキストを子要素に配置する必要があります。表示は目的の効果にリセットされます。クリックすると、完全なデモを見るwriting-mode

多くの学生は私と同じようにこの属性を知らないはずです。

writing-mode

属性、フィードバックをくださった教師 @张鑫兴に感謝します。 writing-mode はテキストの表示方向を変更できます。たとえば、writing-mode を使用してテキストの表示方向を垂直方向に変更できます。

/* 此处引用上面的公共代码 */
/* 此处引用上面的公共代码 */

/* 定位代码 */
.wp {
    line-height: 300px;
    text-align: center;
    font-size: 0px;
}
.box {
    font-size: 16px;
    display: inline-block;
    vertical-align: middle;
    line-height: initial;
    text-align: left; /* 修正文字 */
}

rree

表示効果は次のとおりです。 # さらに驚くべきことは、すべての水平 CSS 属性は、

writing-mode を通じて text-align

などの垂直属性になり、

text-align

は水平を実現できることです。垂直方向の中央揃えも可能ですが、少し面倒です

<div>水平方向</div>
<div>垂直方向</div>

.div2 {
    writing-mode: vertical-lr;
}

この方法は実装して理解するのが少し複雑です[完全なデモを表示]をクリックしてくださいテーブルテーブルは以前はページ レイアウトに使用されていましたが、今は誰もこれを行いません。ただし、テーブルでも水平方向と垂直方向の中央揃えを実現できますが、多くの冗長なコードが追加されます

水平方向
垂
直
方
向

テーブル セルのコンテンツ自然に垂直方向に中央揃えになります。水平方向の中央揃え属性を追加するだけです。

<div>
    <div>
        <div>123123</div>
    </div>
</div>

このメソッドはコードが冗長すぎるため、table

の正しい使用法ではありません。

点击查看完整DEMO

css-table

css新增的table属性，可以让我们把普通元素，变为table元素的现实效果，通过这个特性也可以实现水平垂直居中

<div>
    <div>123123</div>
</div>

下面通过css属性，可以让p显示的和table一样

.wp {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}
.box {
    display: inline-block;
}

这种方法和table一样的原理，但却没有那么多冗余代码，兼容性也还不错

点击查看完整DEMO

flex

flex作为现代的布局方案，颠覆了过去的经验，只需几行代码就可以优雅的做到水平垂直居中

<div>
    <div>123123</div>
</div>

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

目前在移动端已经完全可以使用flex了，PC端需要看自己业务的兼容性情况

点击查看完整DEMO

grid

感谢@一丝姐 反馈的这个方案，css新出的网格布局，由于兼容性不太好，一直没太关注，通过grid也可以实现水平垂直居中

<div>
    <div>123123</div>
</div>

.wp {
    display: grid;
}
.box {
    align-self: center;
    justify-self: center;
}

代码量也很少，但兼容性不如flex，不推荐使用

点击查看完整DEMO

总结

下面对比下各个方式的优缺点，肯定又双叒叕该有同学说回字的写法了，简单总结下

• PC端有兼容性要求，宽高固定，推荐absolute + 负margin

• PC端有兼容要求，宽高不固定，推荐css-table

• PC端无兼容性要求，推荐flex

• 移动端推荐使用flex

小贴士：

方法	居中元素定宽高固定	PC兼容性	移动端兼容性
absolute + 负margin	是	ie6+, chrome4+, firefox2+	安卓2.3+, iOS6+
absolute + margin auto	是	ie6+, chrome4+, firefox2+	安卓2.3+, iOS6+
absolute + calc	是	ie9+, chrome19+, firefox4+	安卓4.4+, iOS6+
absolute + transform	否	ie9+, chrome4+, firefox3.5+	安卓3+, iOS6+
writing-mode	否	ie6+, chrome4+, firefox3.5+	安卓2.3+, iOS5.1+
lineheight	否	ie6+, chrome4+, firefox2+	安卓2.3+, iOS6+
table	否	ie6+, chrome4+, firefox2+	安卓2.3+, iOS6+
css-table	否	ie8+, chrome4+, firefox2+	安卓2.3+, iOS6+
flex	否	ie10+, chrome4+, firefox2+	安卓2.3+, iOS6+
grid	否	ie10+, chrome57+, firefox52+	安卓6+, iOS10.3+

最近发现很多同学都对css不够重视，这其实是不正确的，比如下面的这么简单的问题都有那么多同学不会，我也是很无语

<div>123</div>
<div>123</div>

.red {
    color: red
}

.blue {
    color: blue
}

相关推荐：

CSS实现div水平垂直居中的五种方法

css 实现DIV水平垂直居中于屏幕

以上が集める価値のある CSS で水平方向と垂直方向の中央揃えを実現する 10 の方法のまとめの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。