CSSで要素を中央に配置する方法
CSSを使用した要素の中央揃えは、特に水平方向と垂直方向の両方を中央揃えにする必要がある場合は、本来よりもはるかに難しく見えます。今日は、最新のCSSと少し古い（ただしまだ関連性のある）手法の両方を使用して、それを行う方法を紹介します。
テキスト要素を水平方向に中央揃え
テキストを水平方向に中央揃えするのは簡単です。 text-alignを使用します プロパティを指定し、 centerの値を指定します 。
h1 {
text-align: center;
}上記はすべてのテキストで機能します 要素。
ブロック要素（非テキスト）を水平方向に中央揃えにします
テキスト以外の要素を水平方向に中央揃えするには、 marginを使用できます。 プロパティを指定し、 autoの左右の値を指定します 。要素の幅の値も指定する必要があります：
.center-horizontal {
margin-left: auto;
margin-right: auto;
width: 100px; /* or max-content;*/
}
注：中央の要素に特定の固定幅の値を指定したくない場合は、 width：max-contentを使用できます。 —次に、要素はそのコンテンツの幅まで拡張されます。
ブロックとインラインブロック要素
.center-horizontal 上記のクラスはすべてのブロック要素を中央に配置しますが、インラインは中央に配置しません 要素。 HTMLでは、一部の要素はデフォルトでインライン要素です。 <ボタン> たとえば、要素にはデフォルトの display：inline-blockがあります スタイル。ただし、 display：block を追加するだけで、簡単にブロック要素にすることができます。 CSSクラスへ：
.center-horizontal {
display: block;
margin-left: auto;
margin-right: auto;
width: 100px; /* or max-content;*/
}これで、どの要素でも機能します。
Flexboxで水平方向に中央揃え
最新のフレックスボックスプロパティを使用すると、水平方向に中央揃えにするのは非常に簡単です。現在の.center-horizontalを置き換えます これでクラス：
.center-horizontal {
display: flex;
justify-content: center;
}
ご覧のとおり、
しかし、何らかの理由で、ボタン要素はそうではありません。何が得られますか？
さて、
ただし、ボタンは flex-itemにすることができます つまり、ボタンをフレックスコンテナ内に配置すると、センタリングが機能します。次のHTMLをエディタに追加してみてください：
今それは動作します！ボタン要素から中央のクラスを削除し、ラッピングする親
ヒント：
-
CSSの初心者は通常、要素を垂直方向に中央揃えするのに問題があります。 Flexboxを使用するとこれが簡単になりますが、まず、古いCSSメソッドでどのように機能するかを見てみましょう。
margin-topやmargin-bottomの
また、垂直方向のセンタリングを機能させるには、指定された高さの親コンテナが必要です。次のHTMLをエディタに追加します：
セクションクラス（親）にこのCSSを追加します：
境界線は、何が起こっているのかを簡単に確認できるようにするためのものです。
次に、子要素にこのCSSを追加します：
完了しました！
フレックスボックスで要素を垂直方向に中央揃えするには、親フレックスコンテナが必要です。
これで、子要素がフレックスボックスの垂直方向の中央に配置されます。
要素を垂直方向と水平方向の両方の中央に配置するには、いくつかのプロパティを追加するだけで済みます。古いCSSメソッドから始めましょう。
最初にこのマークアップを追加します：
そしてCSS
ご覧のとおり、これは以前の「垂直方向の中央要素」の例（フレックスボックスなし）と非常によく似ています。ここでは、
最後に、flexboxを使用して同じトリックを実行しましょう。
これと前の中央の垂直方向の例との唯一の違いは、
目安として、最新のCSSグリッドプロパティが垂直方向と水平方向の中央揃えをどのように処理するかを見てみましょう。
2つのプロパティ（
残念ながら、CSSグリッドはすべての最新のブラウザと互換性があるわけではなく、WordPressなどの多くの一般的なCMS /フレームワークでは100％機能しません。
ここでCSSグリッドの現在の互換性ステータスを確認してください。
CSSを使用してWebサイトを水平方向に中央揃えにするためのコードは、次のとおりです- 例 <!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
body {
background: rgb(255, 238, 0);
fon
CSSアニメーションは、組み合わせ、回転、変換することで、さまざまな方法で要素を変換するのに役立ちます。 次の例は、円形パスで要素を移動する方法を示しています。 例 <!DOCTYPE html>
<html>
<head>
<style>
div {
margin: 8%;
width: 35px;
height: 35px;
border-radius: 5px;
background: red;
elementは、 <div class="center-horizontal">
<button>Center me</button>
</div> 要素もフレックスコンテナにすることはできませんが、ボタンと同じようにフレックスアイテムにすることができます。
要素を垂直方向に中央揃え
autoのようなものを使用できると思うかもしれません。 —しかし違います。<section class="section">
<div class="center-vertical">Center me vertically</div>
</section>.section {
height: 200px;
border: 1px solid black;
}.center-vertical {
position: relative;
top: 50%;
transform: translateY(-50%);
}フレックスボックスで垂直方向に中央揃え
center-verticalを削除できます 前の例の子要素のクラス。次に、これら2つのフレックスボックスプロパティを .sectionに追加します。 このようなクラス：.section {
height: 200px;
border: 1px solid black;
display: flex;
align-items: center;
}要素を垂直方向と水平方向の両方に中央揃え
<section class="section">
<div class="center-vertical-and-horizontal">
Center me vertically & horizontally
</div>
</section>.section {
height: 200px;
border: 1px solid black;
}
.center-vertical-and-horizontal {
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: max-content;
} left：50％を追加しています。 宣言、および transformの場合 プロパティ1つの宣言でX軸とY軸の両方を指定します：（-50％、-50％） 。最初の値はX、2番目の値はYです。flexboxを使用して垂直方向と水平方向に中央揃えにします
center-vertical-and-horizontalを削除できます 子要素からのクラス。次に、 .sectionについて説明します。 クラスは次のCSSを使用します：.section {
height: 200px;
border: 1px solid black;
display: flex;
align-items: center;
justify-content: center;
} justify-content：centerです。 水平方向のセンタリングジョブを処理する宣言。CSSグリッドを使用して水平方向と垂直方向に中央揃え
.sectionを置き換えます これでクラス：.section {
height: 200px;
border: 1px solid black;
display: grid;
place-items: center;
} display：grid ＆ place-items：center ）CSSグリッドで仕事をします。とても便利です！