1.左右レイアウトおよび左中右レイアウト

例えば以下のhtml構造があり、左右の2つの欄のレイアウトを設定する

1.1 floatによる実現

设置浮动：左右布局常用的方法就是为子元素设置浮动，然后在其父元素上使用clearfix类清除浮动。CSS代码如下：

.clearfix::after{
  content:"";
  display:block;
  clear:both;
}
.leftChild,
.rightChild{
  float:left;
}

親要素にclearfixを付けることも忘れないでください.

简单来说就是在子元素上添加float:left,在父元素上添加clearfix,就能实现横向布局。

1.2 positionによる実現

设置position绝对定位，为父元素设置position:relative; 为子元素设置position:absolute 。CSS代码如下：

.parent{
  position:relative;
}
.leftChild{
  position:absolute;
  left:0;
  top:0;
}
.rightChild{
  position:absolute;
  left:100px;
  top:0;
}

具体的な間隔はleftとtopによって調節することができる.以上の2つの方法は、左右のレイアウトにも使用でき、左中右のレイアウトにも適用できます.

2.水平中央

行内要素の場合、親要素にtext-align:centerを設定すると、行内要素の水平中央を実現できます.

ブロックレベルの要素であれば、margin:0 autoを設定すればよい.

3.垂直方向中央

1.単行テキスト

要素が単行テキストの場合、line-heightが親要素の高さに等しいように設定できます.

2.元素の高さ不定

2.1 vertical-alignプロパティを使用できますが、vertical-alignは親がtdまたはthの場合にのみ有効です.div、pなどの他のブロックレベル要素ではデフォルトではサポートされていません.vertical-alignを使用するには、親要素display:table、子要素display:table-cellを設定する必要があります.vertical-align:middle; 2.2親要素は次のように設定して、子要素が垂直に中央になることを保証します.

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

3.元素高さ固定

3.1親要素の相対位置付け(position:relative)を設定します.子要素は次のcssスタイルです.

.son{
    position:absolute;
    top:50%;
    height:  ;
    margin-top:-0.5  ;
}

3.2親要素の相対位置付け(position:relative)を設定します.子要素は次のcssスタイルです.

.son{
    position:absolute;
    height:  ;
    top:0;
    bottom:0;
    margin:auto 0;
}

水平方向の中央と垂直方向の中央の方法については、16の方法を参照して、水平方向の中央と垂直方向の中央を実現することができます.