CSSの要素が中央にある

人々はよくCSSの中で中の要素の問題に文句を言って、実はこの問題は実は複雑ではありませんて、ただ方法が多いため、情況によって多くの方法の中から1つを選ぶ必要があります.

水平方向中央

1.inline-block配合text-align(不定幅使用可能)

簡単に1つのblock要素の中で水平に1つのinline要素を中心にすることができます.以下のコードはinline、inline-block、inline-table、inline-flexなどに有効です.サブエレメントが上記のタイプでない場合は、display: inline-blockを設定できます.

.parent {
  text-align: center;
}

2.margin:0 autoメソッド

block要素が固定幅に設定されている場合、要素margin-leftとmargin-rightの値をautoに設定する方法で水平中央を実現することができる.

.child {
  width: 100px;
  margin: 0 auto;
}

block要素が固定幅に設定されていない場合は、サブ要素のcssにdisplay:table;を加えるだけでよい.

.parent {
  width: 200px;
  height: 200px;
  background: #ccc;
}
.child {
/*width: 100px;
  height: 100px; */
  background: rgba(199,1,1,0.2);
  display: table;
  margin: 0 auto;
}

3.absolute配合transform(不定幅使用可能)

.parent{
    position:relative;
}
.child{
    position:absolute;
    left:50%;
    transform: translateX(-50%);
}

4.Flexレイアウトの使用

.parent {
  display: flex;
  justify-content: center;
}

垂直方向中央揃え

1.垂直中央inlineまたはinline-*要素

1.1 1行

inline/text要素は、同じ上下padding値を設定して垂直中心にする目的で簡単に使用できます.

.center {
  pading-top: 30px;
  padding-bottom: 30px;
}

何らかの理由でpaddingメソッドが使用できない場合は、line-heightをheightに等しく設定して目的を達成することもできます.

.center {
  height: 100px;
  line-height: 100px;
  white-space: nowrap;
}

1.2複数行

同じ上下paddingもこの場合に適用できます.有効にならない場合は、エレメントの親エレメントのdispalyをtableに設定し、エレメントのdispalyをtable-cellに設定してvertical-alignを設定します.

.parent {
  display: table;
  width: 200px;
  height: 400px;
}
.child {
  display: table-cell;
  vertical-align: middle;
}

上記の方法が使用できない場合は、flexboxを使用してみてください.個別のflexboxサブエレメントは、親エレメントの中で簡単に中央に位置することができます.この方法では、親要素に一定の高さが必要であることを覚えておいてください.

.parent {
  display: flex;
  justify-content: center;
  flex-direction: column;
  height: 400px;
}

上記の2つの方法が使用できない場合は、「幽霊要素」技術を使用することができます.この方法は、beforeが高さを広げ、文字が垂直に中央に位置します.

.parent {
  position: relative;
}
.parent::before {
  content: " ";
  display: inline-block;
  height: 100%;
  width: 1%;
  vertical-align: middle;
}
.child {
  display: inline-block;
  vertical-align: middle;
}

2.垂直中央blockクラスの要素

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

flexboxの使用

.parent {
  display: flex;
  align-items: center;
}

水平垂直方向中央

1.inline-block配合text-alignプラスtable-cell配合vertical-align

.parent{
    display: table-cell;
    vertical-align:middle;
    text-align:center;
}
.child{
    display: inline-block;
}

ただし、この方法では、厳密な垂直中央を実現するには、親要素にfont-size:0；を設定する必要があることに注意してください.

2.absolute配合transform

.parent{
    position: relative;
}
.child{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

3.flexboxの使用

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

参考資料segmentfault:CSSの各種中央segmentfault:CSS中央完全ガイド