htmlの特定の要素に対して、CSSで中央揃えさせる方法はいくつかあります。
そこで今回は
- 左右に対して中央揃えさせる方法
- 上下に対して中央揃えさせる方法
- 上下左右に対して中央揃えさせる方法
についてそれぞれどのようにCSSを設定すればよいのか解説していきたいと思います！
見本ソース
まず見本のソースとして以下を設定しました。
<div class="box"> <div class="content"></div> </div>
続いてデフォルトのCSSとして以下を設定しました。
.box {
border: 1px solid #ccc;
box-sizing: border-box;
height: 100px;
padding: 20px;
}
.content {
background: #000;
box-sizing: border-box;
height: 30px;
width: 100px;
}
<div class=”box”>を親要素として、その中にある<div class=”content”>を中央揃えさせる要素とします。
左右に対して中央揃えさせる方法
まず左右に対して中央揃えさせるとは、以下のデモページのような形のことを言います。
デモページ
上のデモページのようにするには、以下のようにCSSを設定することで可能になります！
.content {
margin: 0 auto;
}
上下に対して中央揃えさせる方法
続いて特定の要素を中央揃えさせる方法についてです。
見本としては以下のような形になります！
デモページ
このように、上下に対して中央揃えさせるには、親要素となる要素と中央揃えさせたい要素についてそれぞれ以下のようにCSSを設定することで可能になります！
.box {
position: relative;
}
.content {
position: absolute;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
}
上のように、親要素となるものに対してposition: relative;を設定し、中央揃えさせたい要素に対してposition: absolute;を設定した上でtransformを使って上下に対して中央揃えさせることが可能になります(^^)
上下左右に対して中央揃えさせる方法
そして、上下左右に対して中央揃えさせるというのは、以下の状態のことを指します。
デモページ
このように要素を配置するには、以下のようにCSSを設定することで可能になります！
.box {
position: relative;
}
.content {
left: 0;
margin: 0 auto;
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
}
上のように、親要素となるものに対してposition: relative;を設定し、上下左右に対して中央揃えさせたいものに対してまずposition: absolute;を設定した上で、leftとrightの値を0にした上でmargin: 0 auto;にすることで左右に対して中央に配置させることができるようになります！
まとめ
以上がCSSで特定の要素を中央揃えさせる様々な方法でした！
今回紹介したCSSを応用することで、さらに要素の配置を細かく設定することができるようになるので、是非ともいろいろお試しください(^-^)/
