CSS水平中央と垂直中央の方法

この文章は主に私が最近CSS学習の中でまとめた水平&垂直中央のいくつかの方法を紹介します

水平方向中央

サブエレメントは、行内エレメント、単一ブロック、および複数のブロックエレメントのレイアウトスキームが異なります.

行の要素:親要素にtext-align: center；

を設定

ブロック:サブエレメント設定margin: 0 auto;

複数のブロック要素:3つの方式があるa.サブ要素はすべてdisplay: inline-block;に設定され、親要素はtext-align: center； b.flexレイアウトに設定され、親要素はdisplay: flex; justify-content: center; c.複数行がそれぞれ中央にある場合、直接サブ要素にmargin: 0 auto;

を設定する.

垂直方向中央揃え

サブエレメントは、単行インライン、複数行インラインテキスト、およびブロックエレメントのレイアウトスキームが異なります.

単行インラインテキスト:親要素の高さは一定で、設定line-heightはheightに等しく、親要素の高さは不定で、子要素は上下``padding``

を設定する.

複数行インラインテキスト:親要素設定display: table-cell; vertical-align: middle;

ブロック要素:5つの方法a.position:absoluteを使用して、left、top、margin-left、margin-topの属性

を設定する.

.box{
position:absolute;
top:50%;
left:50%;
margin-top:-100px;
margin-left:-100px;
}

b.position:absoluteを使用し、top::0;bottom:0;margin:auto;を設定する
c.CSS 3のtransform属性を使用する

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

d.before、after擬似要素の使用

.box:before{
    content:'';
    display:inline-block;
    vertical-align:middle;
    height:100%;
}
.content{
  width: 100px;
  height: 100px;
  background-color: red;
  display: inline-block;
  vertical-align: middle;
}

e.flexレイアウトを使用して、親要素display: flex; align-items: center;