cssは水平垂直中心のいくつかの方式を実現します

普段よく使うcss水平垂直中央方式を整理します～
flexレイアウトの使用
HTML

CSS

.box {
  width: 100vw;
  height: 500px;
  background: skyblue;

  display: flex;
  align-items: center;
  justify-content: center;
}

.child {
  width: 200px;
  height: 200px;
  background-color: deepskyblue;
}

flexのalignItems:centerを利用して垂直に中央に、justifycontent:center水平に中央に
相対位置決めと絶対位置決めを利用したmargin:autoHTML

CSS

.box {
  width: 100vw;
  height: 500px;
  background: skyblue;

  position: relative;
}

.child {
  width: 200px;
  height: 200px;
  background-color: deepskyblue;

  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

相対位置決めでは、絶対位置決めを用いて上下左右を0に設定し、margin:autoを再設定すれば中央揃えが可能
相対的な位置決めと絶対的な位置決めを利用して、外縁距離と平行移動の配合を加えます
HTML

CSS

.box {
  width: 100vw;
  height: 500px;
  background: skyblue;

  position: relative;
}

.child {
  width: 200px;
  height: 200px;
  background-color: deepskyblue;

  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

相対位置決めでは、絶対位置決めを用いて、marginで外容器の50%をオフセットし、translateで自身の幅の高い50%を平行移動して補うようにすればよいtextAlignおよびverticalAlignの使用
HTML

CSS

.box {
  width: 100vw;
  height: 500px;
  background: skyblue;

  text-align: center;
}

.box:after {
  content: "";
  display: inline-block;
  height: 100%;
  width: 0;
  vertical-align: middle;
}

.child {
  display: inline-block;
  vertical-align: middle;
}

textAlign:centerを用いて行内要素の水平中央を実現し、verticalAlign:middleを用いて行内要素の垂直中央を実現する.前提は、まず偽要素を加えて高さ100%を設定することであり、elementUIを用いたメッセージ弾窓中央実現方式を見ることができる.
その他
上記はいずれも未知の外容器と自身の幅の下で水平垂直中央を実現しており、その幅の高さが既知であれば、より多くの簡単な方法で中央を実現することができ、その原理は絶対位置決めのtop/leftオフセット、marginオフセット、padding充填を利用することにほかならないが、ここでは分析しない.また,単純文字の中央はlineHeightとtextAlignで実現できる.
フロントエンド学習カード群へようこそ～516913974