【CSS】Flexbox 上下中央揃え
- 更新
- デザインのメモ
block要素を上下中央揃え（真ん中）にする。
ベンダープレフィックスなしで動作する。
IE11問題なし。
サンプル
正方形の真ん中にflexboxと書く場合。
250pxの正方形の真ん中にテキストを持ってくる場合のCSS。
コードを見る（HTML・CSS）
HTML
<div class="container">
<p>flexbox</p>
</div>
CSS
/* ---------- 01 上下中央揃え ---------- */
.container {
display: flex;
justify-content: center;
align-items: center;
width: 250px;
height: 250px;
background: #e8dc6a;
}
.container p {
color: #2b2a27;
font-weight: bold;
}
関連記事
デザコトauthor
あ、いいな、と思うWebデザインを紹介しています。デザインの参考に。やさしいデザインが多いです。Webデザインギャラリー『デザインのこと - Web design gallery』を運営しています。
