CSSで何かを中央揃えにする方法-Div、テキストなどを揃える

物事を中心に置くことは、CSSの最も難しい側面の1つです。

通常、メソッド自体を理解するのは難しくありません。代わりに、それは物事を中心に置く方法がたくさんあるという事実によるものです。

使用する方法は、中央揃えしようとしているHTML要素、または水平方向と垂直方向のどちらを中央揃えにするかによって異なります。

このチュートリアルでは、さまざまな要素を水平方向、垂直方向、および垂直方向と水平方向の両方の中央に配置する方法について説明します。

水平方向に中央揃えする方法

一般に、要素を水平方向に中央揃えにする方が、垂直方向に中央揃えするよりも簡単です。水平方向に中央揃えにする一般的な要素と、それを行うためのさまざまな方法を次に示します。

CSSテキストを使用してテキストを中央揃えにする方法-中央揃えプロパティ

テキストまたはリンクを水平方向に中央揃えするにはtext-align、次の値を指定してプロパティを使用しますcenter

Hello, (centered) World!

p { text-align: center; }

CSSマージンオートでDivを中央に配置する方法

margin値とともに省略形プロパティを使用して、0 autoブロックレベルの要素をdiv水平方向のように中央に配置します。

.child { ... margin: 0 auto; }

Flexboxを使用してDivを水平方向に中央揃えする方法

Flexboxは、ページの中央に配置するための最新の方法であり、レスポンシブレイアウトの設計を以前よりもはるかに簡単にします。ただし、InternetExplorerなどの一部のレガシーブラウザでは完全にはサポートされていません。

フレキシボックスで水平方向の要素を中央に、ちょうど適用display: flexし、justify-content: center親要素に:

.container { ... display: flex; justify-content: center; }

垂直方向に中央揃えする方法

Flexboxのような最新の方法を使用せずに要素を垂直方向に中央揃えすることは、非常に面倒な作業になる可能性があります。ここでは、最初に物事を垂直方向に中央揃えする古い方法のいくつかを確認してから、Flexboxでそれを行う方法を示します。

CSSの絶対配置と負のマージンを使用してDivを垂直方向に中央揃えする方法

長い間、これは物事を垂直に中央に配置するための頼りになる方法でした。この方法では、中央に配置する要素の高さを知っている必要があります。

まず、display親要素のプロパティをに設定しますrelative

そして、子要素のために、セットdisplayにプロパティをabsolutetopします50%

.container { ... position: relative; } .child { width: 50px; height: 50px; background-color: red; /* Center vertically */ position: absolute; top: 50%; }

しかし、それは実際には子要素の上端を垂直方向に中央揃えするだけです。

子要素を真に中央に配置するには、margin-topプロパティを-(half the child element's height)次のように設定します。

.container { ... position: relative; } .child { width: 50px; height: 50px; background-color: red; /* Center vertically */ position: absolute; top: 50%; margin-top: -25px; /* half this element's height */ }

変換と平行移動を使用してDivを垂直方向に中央揃えする方法

中央に配置する要素の高さがわからない場合(または中央に配置する場合でも)、この方法は気の利いたトリックです。

この方法は、上記の負のマージンの方法と非常によく似ています。display親要素のプロパティをに設定しますrelative

子要素については、displayプロパティをabsoluteに設定topし、に設定し50%ます。負のマージンを使用して子要素を真に中央に配置する代わりに、次を使用しますtransform: translate(0, -50%)

.container { ... position: relative; } .child { ... position: absolute; top: 50%; transform: translate(0, -50%); }

translate(0, -50%)の省略形ですtranslateX(0)translateY(-50%)transform: translateY(-50%)子要素を垂直方向の中央に配置するように書き込むこともできます。

Flexboxを使用してDivを垂直方向に中央揃えする方法

Flexboxを使用すると、物を水平方向に中央揃えにするのと同じように、物事を垂直方向に中央揃えするのが非常に簡単になります。

要素を垂直方向の中央に配置するには、display: flexalign-items: centerを親要素に適用します。

.container { ... display: flex; align-items: center; }

垂直方向と水平方向の両方を中央に配置する方法

CSSの絶対配置と負のマージンを使用してDivを垂直方向と水平方向に中央揃えする方法

これは、要素を垂直方向に中央揃えする上記の方法と非常によく似ています。前回と同様に、中央に配置する要素の幅と高さを知っている必要があります。

display親要素のプロパティをに設定しますrelative

そして、子供のセットdisplayにプロパティをabsolutetop50%、とleftします50%。これは、子要素の左上隅を垂直方向と水平方向の中央に配置するだけです。

子要素を真に中央に配置するには、子要素の高さの半分に設定された負の上部マージンと、子要素の幅の半分に設定された負の左マージンを適用します。

.container { ... position: relative; } .child { width: 50px; height: 50px; background-color: red; /* Center vertically and horizontally */ position: absolute; top: 50%; left: 50%; margin: -25px 0 0 -25px; /* apply negative top and left margins to truly center the element */ }

変換と平行移動を使用してDivを垂直方向と水平方向に中央揃えする方法

Use this method to center an element vertically and horizontally if you don't know its exact dimensions and can't use Flexbox.

First, set the display property of the parent element to relative.

Next, set the child element's display property to absolute, top to 50%, and left to 50%.

Finally, use transform: translate(-50%, -50%) to truly center the child element:

.container { ... position: relative; } .child { ... position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

How to Center a Div Vertically and Horizontally with Flexbox

Flexbox is the easiest way to center an element both vertically and horizontally.

This is really just a combination of the two previous Flexbox methods. Then apply justify-content: center and align-items: center to center the child element(s) horizontally and vertically:

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

That's everything you need to know to center with the best of 'em. Now go forth and center all the things.