<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;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.