[CSS]高さが分からない要素やテキストを中央寄せに配置するスタイルシートのまとめ

Post on:2019年1月21日

テキストや要素を左右の中央寄せに配置

テキストや要素を左右の中央寄せに配置する場合は、その要素がテキストかそれ以外かで異なります。

テキストを左右の中央寄せに配置

パラグラフや見出しなどに含まれるテキストを左右の中央に配置します。

<style>
p {
    text-align: center;
}
h1 {
    text-align: center;
}
</style>

<p>左右の中央寄せに配置</p>

<h1>左右の中央寄せに配置</h1>

<style>

p {

text-align: center;

}

h1 {

text-align: center;

}

</style>

<p>左右の中央寄せに配置</p>

<h1>左右の中央寄せに配置</h1>

画像やブロック要素を左右の中央寄せに配置

画像やブロック要素（テキストをブロック要素で内包した場合も）を左右の中央寄せに配置します。
配置する要素は幅を持っている必要があり、幅を持っていない場合は幅を指定します。

<style>
img {
    display: block; /* ブロックレベルに変更 */
    margin: 0 auto;
}
p {
    margin: 0 auto;
    width: 8em; /*幅を指定*/
}
</style>

<img src="image.png" alt="左右の中央寄せに配置">

<p>左右の中央寄せに配置</p>

<style>

img {

display: block; /* ブロックレベルに変更 */

margin: 0 auto;

}

p {

margin: 0 auto;

width: 8em; /*幅を指定*/

}

</style>

<p>左右の中央寄せに配置</p>

両方にp要素の左右中央がありますが、それぞれ異なります。
「text-align: center;」はp要素内のテキストが中央配置で、「margin: 0 auto;」はp要素自体が中央配置です。

テキストや要素を上下の中央寄せに配置

中に配置する要素の高さも不明、外側の容器の高さも不明で、上下の中央寄せに配置します。

高さ不明の要素を天地の中央寄せに配置

positionをrelativeにし、topから50%に配置し、さらにtransformで自身の高さの50%を上方向に移動させて配置します。%で配置するので、要素も容器も高さ不明で天地の中央に配置できます。
※対応ブラウザはすべてのモダンブラウザと、IEは9+です。

<style>
.child {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%); /* Safari用 */
  transform: translateY(-50%);
}
</style>


<div class="parent">
<p class="child">上下の中央寄せに配置</p>
</div>

<style>

.child {

position: relative;

top: 50%;

-webkit-transform: translateY(-50%); /* Safari用 */

transform: translateY(-50%);

}

</style>

<p class="child">上下の中央寄せに配置</p>

</div>

テキストや要素を上下左右の中央寄せに配置

上下左右の中央に配置するテクニックは、要素のサイズが不明な場合、そしてFlexboxを使った超シンプルなコードの2本立てです。

サイズが不明な要素を上下左右の中央寄せに配置

上下の中央と同じ仕組みで、上下左右の中央寄せに配置します。

<style>
.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%); /* Safari用 */
  transform: translate(-50%, -50%);
}
</style>

<div class="parent">
<p class="child">上下左右の中央寄せに配置</p>
</div>

<style>

.parent {

position: relative;

}

.child {

position: absolute;

top: 50%;

left: 50%;

-webkit-transform: translate(-50%, -50%); /* Safari用 */

transform: translate(-50%, -50%);

}

</style>

<p class="child">上下左右の中央寄せに配置</p>

</div>

Flexboxを使って上下左右の中央寄せに配置

IE10+であれば、Flexboxで指定するのが簡単です。
flexのサポート状況 -Can I Use

<style>
.parent{
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>

<div class="parent">
<p class="child">上下左右の中央寄せに配置</p>
</div>

<style>

.parent{

display: flex;

justify-content: center;

align-items: center;

}

</style>

<p class="child">上下左右の中央寄せに配置</p>

</div>

シンプルなコードですが、使用時にはSafari用にプレフィックスが必要です。

<style>
.parent{
  display: -webkit-flex; /* Safari用 */
  display: flex;
  -webkit-justify-content: center; /* Safari用 */
  justify-content: center;
  -webkit-align-items: center; /* Safari用 */
  align-items: center;
}
</style>

<div class="parent">
<p class="child">上下左右の中央寄せに配置</p>
</div>

<style>

.parent{

display: -webkit-flex; /* Safari用 */

display: flex;

-webkit-justify-content: center; /* Safari用 */

justify-content: center;

-webkit-align-items: center; /* Safari用 */

align-items: center;

}

</style>

<p class="child">上下左右の中央寄せに配置</p>

</div>

テキストや要素をビューポートの上下左右の中央寄せに配置

「position: absolute;」で配置された要素のデフォルトの容器はビューポートで、ブラウザの場合、それはブラウザのウインドウを意味します。

ビューポートの上下左右の中央寄せに配置

「margin-right: -50%;」は「left: 50%;」を補うために指定しており、容器の幅を50%減らし、右に同じ量のマージンを指定することで、本来の容器の幅と同じ幅になります。

<style>
.parent{
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  -webkit-transform: translate(-50%, -50%); /* Safari用 */
  transform: translate(-50%, -50%);
}
<style>

<div class="parent">
<p class="child">ビューポートの上下左右の中央寄せに配置</p>
</div>