<div class="boxwrap">
<h2>①text-alignとpaddingで中央配置</h2>
<div class="wrap pattern-1 mgb-20">
中央に配置①
</div>
<div class="wrap pattern-1 mgb-20">
中央に配置①は<br>子要素のサイズに影響される
</div>
<h2>②heightとline-heightで中央配置</h2>
<div class="wrap pattern-2 mgb-20">
中央に配置②
</div>
<div class="wrap pattern-2 mgb-80">
中央に配置②は<br>改行ができない
</div>
<div class="wrap pattern-2-round mgb-20"> 応用 </div>
<h2>③tableレイアウトとvertical-alignで中央配置</h2>
<div class="wrap pattern-3 mgb-20">
<div>中央に配置③</div>
</div>
<div class="wrap pattern-3 mgb-20">
<div>中央に配置③は<br>改行ができる</div>
</div>
<div class="wrap pattern-3 mgb-20">
<div>中央に配置③は<br>改行ができるが<br>親要素より大きいと<br>影響される</div>
</div>
<h2>④positionとtranslateで中央配置</h2>
<div class="wrap pattern-4 mgb-20">
<div>中央に配置④</div>
</div>
<div class="wrap pattern-4 mgb-20">
<div>中央に配置④は<br>改行ができるし<br>子要素に影響されない</div>
</div>
<h2>⑤flexboxで中央配置</h2>
<div class="wrap pattern-5 mgb-20">
<div>中央に配置⑤</div>
</div>
<div class="wrap pattern-5 mgb-20">
<div>中央に配置⑤は<br>text-align:center;不要</div>
</div>
<div class="wrap pattern-5 mgb-20">
<div>中央に配置⑤は</div>
<div>子要素が複数でも対応可能</div>
</div>
<h2>⑥CSS Gridレイアウトで中央配置</h2>
<div class="wrap pattern-6 mgb-20">
<div>中央に配置⑥</div>
</div>
<div class="wrap pattern-6 mgb-20">
<div>中央に配置⑥は<br>IE11非対応</div>
</div>
</div>
/* レイアウト用スタイル */
.boxwrap{
margin:40px auto;
width:400px;
padding:20px 60px;
border:1px solid #ddd;
background-color: #efefef;
}
.wrap{
margin: auto;
width: 300px;
background-color: #7178a7;
color: #fff;
border-radius: 5px;
}
.mgb-20{
margin-bottom: 20px;
}
.mgb-80{
margin-bottom: 80px;
}
/* ①text-alignとpaddingで中央配置 */
.wrap.pattern-1{
text-align:center;
padding:20px 0;
}
/* ②heightとline-heightで中央配置 */
.wrap.pattern-2{
text-align:center;
height:60px;
line-height:60px;
}
/* 応用 */
.wrap.pattern-2-round{
text-align:center;
height:60px;
line-height:60px;
width:60px;
border-radius:50%;
}
/* ③tableレイアウトとvertical-alignで中央配置 */
.wrap.pattern-3{
height:60px;
display:table;
text-align:center;
}
.wrap.pattern-3 div{
display:table-cell;
vertical-align:middle;
}
/* ④positionとtranslateで中央配置 */
.wrap.pattern-4{
height:60px;
text-align:center;
position:relative;
}
.wrap.pattern-4 div{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
width:100%;
}
/* ⑤flexboxで中央配置 */
.wrap.pattern-5{
height:60px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
/* ⑥CSS Gridレイアウトで中央配置 */
.wrap.pattern-6{
height:60px;
display: grid;
place-items: center;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.