水平・垂直センタリング効果を実現するCSSまとめ(3)

CSS は水平方向と垂直方向の中央揃えを実装します

CSS で水平方向の中央揃えを実装するのは比較的簡単です。一般に、インライン要素またはインラインブロック要素の水平方向の中央揃えを実現したい場合は、その親ブロックレベル要素に text-align: center を設定します。 -level 要素、magin:auto を設定できます。また、垂直方向の中央揃えを実現したい場合、それは簡単ではないかもしれません。 text-align: center实现；如果想实现块级元素的水平居中对齐，可以设置magin: auto。而如果想实现垂直居中对齐，或许就不太容易。

以下，我总结了一些实现水平垂直居中对齐的一些方法。如果有什么不足之处，望指出。

水平垂直居中的实现可以分为两大内容，一是高度随内容自适应变化，一是固定高度。

固定高度实现水平垂直居中

方法一

最常用的方法是使用height + line-height的方式，设置同样的值，配合text-align的使用，即可实现文本的水平垂直居中对齐

<p class="container">Hello World！</p>.container {
    width: 300px;
    height: 300px;
    line-height: 300px;
    text-align: center;
    border: 1px solid red;
}

缺点：固定高度，无法实现两行文本的垂直居中对齐

方法二

使用绝对定位的方法，配合margin负值使用。可以实现元素的水平垂直居中效果。

<p class="container">Hello World！</p>.container {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -150px;
    margin-top: -150px;
    width: 300px;
    height: 300px;
    border: 1px solid red;
}

当然了，可以使用CSS3的calc函数简化上面的CSS代码

.container {
    position: absolute;
    left: calc(50% - 150px);
    top: calc(50% - 150px);
    width: 300px;
    height: 300px;
    border: 1px solid red;
}

缺点：固定高度，高度无法自适应内容。元素脱离文档流。

方法三

添加空标签的方式，并且使该元素浮动，脱离文档流，避免影响其他元素的布局。

<p class="space"></p>
<p class="container">
    <p class="inner">
        hello world！    </p>
</p>.space {    float: left;
    height: 50%;
    margin-top: -150px;
}

.container {
    clear: both;
    height: 300px;
    border: 1px solid red;
    position: relative;
}

缺点：这种方式下的垂直居中需要固定高度，无法实现内容自适应高度。同时，出现多余的空p元素。

高度自适应实现水平垂直居中

方法一

CSS3中有transform属性，此属性下有一个translate移动函数，此函数接受两个参数。如果两个参数都为百分比值，此时会基于自身宽度和高定进行移动。此函数移动的机制同position:relative相似。

<p class="container">Hello World！</p>.container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); // 自身宽度和高度的一半    border: 1px solid red;
}

优点：无需定高度。高度随内容自适应。
缺点：元素脱离文档流。如果需要居中的元素已经在高度上超过了视口，那它的顶部会被视口裁切掉。

方法二

我们知道，可以使用margin来实现水平居中对齐，而无法使用margin实现垂直居中的原因在于margin的百分比值是基于宽度计算的。

<p class="container">Hello World！</p>.container {
    width: 300px;
    margin: 50% auto 0;
    border: 1px solid red;
    tarnsform: translateY(-50%);
}

上面代码中，由于百分比是基于父元素（此时的父元素为body元素）的宽度计算的，所以此时的50%加上translate负值并不能实现垂直居中布局。

不过，CSS中存在一个vh（视口高度）,也就相当于DOM中document.body.clientHeight或者document.documentElement.clientHeight的高度，1vh=1%，即1vh等于视口高度的1%。vh单位的浏览器兼容性问题可看vh。因此，以上代码可改为如下，即可实现水平垂直居中效果。

<p class="container">Hello World！</p>.container {
    width: 300px;
    margin: 50vh auto 0;
    transform: translateY(-50%);
    border: 1px solid red;
}

方法三

CSS3中存在flex布局（伸缩布局盒模型，也叫弹性布局盒模型），对于flex熟悉的朋友来说，使用flex实现水平垂直居中是再简单不过的了。

<p class="container">
    <p class="inner">
        <p>hello world!</p>
    </p>
</p>.container {
    display: flex;
    height: 100vh;
}

.inner {
    margin: auto;
}

当我们使父元素display: flex时，margin: auto不仅可以水平居中，也能够实现垂直居中。这是因为auto外边距会平分水平或垂直方向上的额外空间。

当然，也可以使用justify-content: center来定义弹性项目主轴的对齐方式，align-items: center来定义弹性项目侧轴的对齐方式。

<p class="container">
    <p class="inner">
        <p>hello world</p>
    </p>
</p>.container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

方法四

可以使用display: table来模拟表格，并给子元素设置display: table-cell，让其成为表格的某个单元格，同时设置vertical-align: middle

以下に、水平方向と垂直方向の中央揃えを実現するいくつかの方法をまとめました。不足点がございましたら、ご指摘ください。

水平方向と垂直方向のセンタリングの実装は大きく2 つの内容に分けることができ、 1 つはコンテンツに応じて高さを適応的に変更するものと高さを固定するものです。

高さを固定して水平方向と垂直方向の中央揃えを実現します

方法 1

最も一般的な方法は、高さと行の高さを使用し、同じ値を設定し、text-align を使用してテキストの配置を実現することです。垂直方向の中央揃え

🎜🎜🎜

<p class="container">
    <p class="inner">
        hello world！    </p>
</p>.container {
    display: table;         /* 让p以表格的形式渲染 */
    width: 100%;
    border: 1px solid red;
}

.inner {
    display: table-cell;    /* 让子元素以表格的单元格形式渲染 */
    text-align: center;
    vertical-align: middle;
}

🎜 短所: 高さが固定されており、2 行のテキストの垂直方向の中央揃えを実現できません🎜

方法 2

🎜 負のマージン値で使用される絶対配置方法を使用します。要素の水平方向および垂直方向のセンタリング効果を実現できます。 🎜🎜🎜🎜rrreee🎜もちろん、CSS3のcalc関数を使って上記のCSSコードを簡略化することもできます🎜🎜🎜🎜rrreee🎜 短所: 高さが固定されており、高さがコンテンツに適応できない。要素はドキュメント フローから抜け出します。 🎜

方法 3

🎜 空のタグを追加し、要素をドキュメント フローの外にフロートさせて、他の要素のレイアウトに影響を与えないようにします。 🎜🎜🎜🎜rrreee🎜 短所: この方法で垂直方向にセンタリングするには固定の高さが必要であり、コンテンツに適応した高さを実現できません。同時に、冗長な空の p 要素が表示されます。 🎜🎜水平方向と垂直方向のセンタリングの高さ適応実装🎜

方法 1

🎜 CSS3 には、translate 移動関数があります。この関数は 2 つのパラメーターを受け取ります。両方のパラメータがパーセント値の場合、移動は独自の幅と高さに基づいて行われます。この関数の移動メカニズムは position:relative と似ています。 🎜🎜🎜🎜rrreee🎜 利点: 高さを設定する必要がありません。高さは内容に合わせて調整します。 🎜欠点: 要素はドキュメント フローの外にあります。中央に配置する必要がある要素の高さがすでにビューポートを超えている場合、その上部はビューポートによって切り取られます。 🎜

方法 2

🎜 マージンを使用して水平方向の中央揃えを実現できることはわかっていますが、マージンを使用して垂直方向の中央揃えを実現できない理由は、マージンのパーセンテージ値が幅に基づいて計算されるためです。 🎜🎜🎜🎜rrreee🎜 上記のコードでは、親要素(この時の親要素はbody要素)の幅に基づいてパーセンテージを計算しているため、この時の50%+translateのマイナス値は計算できません。垂直方向中央のレイアウトを実現します。 🎜🎜 ただし、CSS には vh (ビューポートの高さ) があり、これは DOM の document.body.clientHeight または document.documentElement.clientHeight の高さに相当します。 、1vh =1%、つまり、1vh はビューポートの高さの 1% に等しくなります。 vh ユニットとのブラウザ互換性の問題については、「vh」を参照してください。したがって、上記のコードを次のように変更して、水平および垂直のセンタリング効果を実現できます。 🎜🎜🎜🎜rrreee

方法 3

🎜 CSS3 には flex レイアウト (格納式レイアウト ボックス モデル、エラスティック レイアウト ボックス モデルとも呼ばれます) があり、flex を使用して水平と垂直を実現します。センタリングが最良の解決策です。これ以上に簡単なことはありません。 🎜🎜🎜🎜rrreee🎜親要素 display: flex を作成すると、margin: auto を水平方向に中央揃えにするだけでなく、垂直方向にも中央揃えにすることができます。これは、自動マージンが余分なスペースを水平または垂直に二等分するためです。 🎜🎜もちろん、 justify-content: center を使用して柔軟な項目の主軸の配置を定義したり、 align-items: center を使用して柔軟なアイテムの横軸の位置合わせ。 🎜🎜🎜🎜rrreee

方法 4

🎜 display: table を使用してテーブルをシミュレートし、display: table-cell を子に設定できます。要素を追加してテーブルのセルになり、vertical-align: middle を設定して垂直方向の中央揃えのレイアウトを実現します🎜🎜🎜🎜rrreee🎜 🎜🎜このメソッドを使用すると、身長。水平方向および垂直方向のセンタリング効果を実現するには、高さを指定するか、高さを指定しないだけで済みます。 🎜

以上が水平・垂直センタリング効果を実現するCSSまとめ(3)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。