CSSレイアウト-水平方向と垂直方向の配置
要素を
水平方向と垂直方向に中央揃え
要素を中央揃え
ブロック要素（<div>など）を水平方向に中央揃えするには、次を使用します margin: auto;
要素の幅を設定すると、要素がコンテナの端まで伸びないようになります。
要素は指定された幅を占め、残りのスペースは2つの余白の間で均等に分割されます。
このdiv要素は中央に配置されます。
例
.center
{
margin: auto;
width: 50%;
border: 3px solid green;
padding: 10px;
}
注：widthプロパティが設定されていない（または100％に設定されている）場合、中央揃えは効果がありません。
テキストを中央揃え
要素内のテキストを中央に配置するには、次を使用します text-align: center;
このテキストは中央に配置されます。
例
.center {
text-align: center;
border: 3px solid green;
}
ヒント：テキストを揃える方法のその他の例については、CSSテキストの章を参照してください。
画像を中央に配置
画像を中央に配置するには、左右の余白をに設定autoしてblock要素にします。
例
img
{
display: block;
margin-left: auto;
margin-right: auto;
width: 40%;
}
左右揃え-位置を使用
要素を整列させる1つの方法は、次を使用することposition: absolute;です。
私の若くてより脆弱な年に、私の父は私にそれ以来ずっと私の心の中でひっくり返してきたいくつかのアドバイスをくれました。
例
.right
{
position: absolute;
right: 0px;
width: 300px;
border: 3px solid #73AD21;
padding: 10px;
}
注：絶対位置の要素は通常のフローから削除され、要素と重なる可能性があります。
左右揃え-フロートを使用
要素を整列させる別の方法は、floatプロパティを使用することです。
例
.right
{
float: right;
width: 300px;
border: 3px solid #73AD21;
padding: 10px;
}
clearfixハック
注：要素がそれを含む要素よりも背が高く、フロートしている場合、その要素はコンテナーの外にオーバーフローします。「clearfixハック」を使用してこれを修正できます（以下の例を参照）。
Clearfixなし
Clearfixを使用
次に、この問題を修正するために、包含要素にclearfixハックを追加できます。
例
.clearfix::after {
content: "";
clear: both;
display: table;
}
垂直方向の中央揃え-パディングを使用
There are many ways to center an element vertically in CSS. A simple solution is to use top and bottom padding:
I am vertically centered.
Example
.center {
padding: 70px 0;
border: 3px solid
green;
}
To center both vertically and horizontally, use padding and text-align: center:
I am vertically and horizontally centered.
Example
.center {
padding: 70px 0;
border: 3px solid
green;
text-align: center;
}
Center Vertically - Using line-height
Another trick is to use the line-height property with a value that is equal
to the height property:
I am vertically and horizontally centered.
Example
.center {
line-height: 200px;
height: 200px;
border: 3px solid green;
text-align: center;
}
/* If the text has multiple lines, add the
following: */
.center p {
line-height: 1.5;
display: inline-block;
vertical-align: middle;
}
Center Vertically - Using position & transform
If padding and line-height
are not options, another solution is to use positioning and the transform property:
I am vertically and horizontally centered.
Example
.center {
height: 200px;
position: relative;
border: 3px solid green;
}
.center p {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Tip: You will learn more about the transform property in our 2D Transforms Chapter.
Center Vertically - Using Flexbox
You can also use flexbox to center things. Just note that flexbox is not supported in IE10 and earlier versions:
Example
.center {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
border: 3px solid
green;
}
Tip: You will learn more about Flexbox in our CSS Flexbox Chapter.