ボックスを上下左右中央に配置する

■ボックスを上下左右中央に配置する■

こちらもFlexboxを使った小技。justify-content: center; と align-items: center;
を追加すればOKです。今までも position: absolute; を使ってCSSだけでも実装できていましたが、
より簡単になるかなーと思い紹介します。

 

▲ＨＴＭＬ▲

<div class=”main”>
<section>
<h1>Centre</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent fermentum id mauris eget commodo.
</p>
</section>
</div>

▲ＣＳＳ▲

.main {
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
justify-content: center;
-webkit-align-items: center;
align-items: center;
height: 400px;
}

.main section {
width: 250px;
margin: 10px;
border-radius: 5px;
background: #F5F0CF;
padding: 15px;
}
.main h1 {
color: #E6AC27;
font-size: 1.5rem;
}
.main p {
margin-top: 10px;
}