【CSS】要素を上下左右・中央寄せに配置する方法

text-align:center;の指定

一番簡単に中央寄せが出来る方法です。テキストや画像などのインライン要素を中央揃えにする方法です。

これは子要素にwidthとheightを指定する必要がありません。

ただこの場合は、単一行では問題ないですが、複数行になるとtext-align:center;だけでは上下左右の中央寄せにはならないデメリットがあります。

[CSS]　text-align:center;の指定

 .center{
　　text-align:center;
　　padding:20px;
　　border:1px solid #666;
　　}

中央寄せ

垂直方向の中央寄せ指定のvertical-alignプロパティもインライン要素に適用します。

ブロックレベル要素には適用できませんので、ブロックボックス及びブロックボックス内のテキストなど縦方向の中央寄せには適用できません。

margin:0 auto;の指定

divボックス要素のようなブロックレベル要素を中央寄せのときに「text-align:center;」プロパティは使えません。

「text-align」プロパティはインライン要素の配置にしか使えないので、ブロックレベル要素には適用できません。ブロック要素の場合はmargin:0 auto;を使用します。

[CSS]　margin:0 auto;

 .child{
　　width:150px;
　　height:80px;
　　background-color:#666;
　　margin:0 auto;
　　}

display:table;・display:table-cell;の指定

table-cellにサイズを指定しなかった場合、親要素がtableならばそのサイズいっぱいにまで広がります。

またdisplay:table指定の親要素の中にtable-cell指定の子要素ボックスが１つだけある場合は、子要素に横・高さのサイズを指定しても、指定したサイズに関係なく、display:table指定の親要素の大きさいっぱいに伸びます。

[CSS]　display:table;・display:table-cell;

 .parent{
　　display:table;
　　}
 .child{
　　display:table-cell;
　　width:150px;
　　height:50px;
　　background-color:#666;
　　vertical-align: middle;
　　text-align:center;
　　}

vertical and centering

justify-content:center;・align-items:center;の指定

[CSS]　display:table;・display:table-cell;

 .parent{
　　display:flex;
　　justify-content:center;
　　align-items:center;
　　}
 .child{
　　width:150px;
　　height:50px;
　　background-color:#666;
　　}

vertical and centering

position:relative;・position:absolute;の指定

子要素ボックスは親要素内にて、上下左右の値が全て「0」に指定され配置されています。

全てのマージン(margin)を「auto」に指定することで子要素ボックスは水平・垂直方向の両方が真ん中に配置されます。

[CSS]　display:table;・display:table-cell;

 .parent{
　　position:relative;
　　}
 .child{
　　position:absolute;
　　margin: auto;
　　top: 0; left: 0; bottom: 0; right: 0;
　　background-color:#666;
　　}

vertical and centering

translate(-50%,-50%);の指定

[CSS]　translate(-50%,-50%);

 .parent{
　　position:relative;
　　}
 .child{
　　position:absolute;
　　top:50%;
　　left:50%;
　　transform: translate(-50%,-50%);
　　background-color:#666;
　　}

vertical and centering

display:table-cell;・vertical-align:middle;の指定

text-alignとvertical-alignプロパティは通常インライン要素に適用されるものですが、table-cellプロパティが指定された要素の中では、そのコンテンツの配置に影響を与えます。

ここでtable-cellプロパティのサイズを%で指定しても効きませんので、パーセンテージ(%)で指定したい場合は、まずtable-cell指定の要素は親要素を持つ必要があります。

例えばdisplay:tableプロパティが指定された親要素が必要になります。

[CSS]　display:table-cell;・vertical-align:middle;

 .parent{
　　display:table;
　　}
 .child{
　　display:table-cell;
　　width:150px;
　　height:50px;
　　background-color:#666;
　　vertical-align: middle;
　　text-align:center;
　　}
 .grandchild{
　　display:inline-block;
　　margin:0 auto;
　　width:150px;
　　height:50px;
　　background-color:#666;　　}

vertical and centering