CSS上下左右中央の方法-実践中

  

    

      

        111111124
        111111124
      
    
  

CSSスタイル
方法1:位置決め+transform:translate
前提:親要素はスクリーンサイズ(または固定幅の高さ)、子要素固定幅親要素:幅、高さ100%;絶対位置決めtop、left 0サブエレメント:固定幅;相対位置決めかつleft,top 50%はtransform:translateを用いて自身の幅に対して上下中央,左右中央に移動する効果がある.欠点:1、具体的な高さと幅が必要です.親要素のサイズが固定され、子要素の高さが親要素を超えると、子要素の上部が見えず、下の親要素が空白になります.

.container {
  background-color: pink;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.content {
  background-color: brown;
  position: relative;
  width: 500px;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

方法2:親要素padding値
前提:親要素はpadding値を設定し、子要素の幅の高さは親要素を固定しない:padding値を設定し、子要素:幅の高さは固定しない欠点:親要素の高さは子要素に従って変化し、ログインには適用されません.

.container {
  padding: 30%;
  background-color: pink;
}
.content {
  background-color: brown;
}

方法3:line-height+display:inline-block;
前提:子要素の固定幅行の高さ現在の親divの高さ(400 px)に設定すると、固定高さのある子divは中央に表示されません.問題は、ブラウザでデフォルトでテキストの中央に表示されていることです.つまり、テキスト(chromeデフォルトfont-size:16 px;hight:21 px)として中央に表示され、高さ100 pxとして中央に表示されていません.したがって、親divのline-heightを調整する必要があります.font-size:0(対応するフォントの高さが0)を例にとると、line-heightはサブdivの高さ(400 px+200 px;)を増やす必要がある.

.container3 {
  background-color: pink;
  line-height: 600px;
  height: 400px;
  text-align: center;
  /* width: 100%; */
  font-size: 0;
  /*  ：  */
}
.content3 {
  background-color: brown;
  display: inline-block;
  width: 200px;
  height: 200px;
  font-size: 14px;
  line-height: 200px;
}

方法4:位置決め(top:50%;left:50%)+margin
前提:親要素には固定幅があり、子要素には固定幅があり、子divは上下中央:top:50%である.margin-top:-h/2; あるいはbottom:50%;margin-bottom:-h/2; サブdiv左右中央:left:50%;margin-left:-w/2またはright:50%;margin-right:-w/2;

.container {
  background-color: pink;
  width: 100%;
  height: 400px;
  position: relative;
}
.content {
  background-color: brown;
  position: absolute;
  bottom: 50%;
  margin-bottom: -50px;
  left: 50%;
  margin-left: -50px;
  width: 100px;
  height: 100px;
}

方法5:位置決め(top:0;bottom:0;left:0 right:0;)+margin: auto;
位置決めプロパティtopとbottom(またはleftとright)の値はそれぞれ0に設定されていますが、サブdivには固定高さ(幅)があり、上下(左右)の間隔が0に達することはありません.サブdivにmargin:autoを設定すると中央に表示されます.親要素には固定幅があり、子要素には固定幅があり、親divタグの下で位置決め(position:relative|absolute|fixed|sticky);サブdiv絶対位置決め(position:absolute)サブdiv上下中央:top:0;bottom:0;margin-top:auto;margin-bottom:auto子div左右中央:left:0;right:0;margin-left:auto;margin-right:auto

.container {
  background-color: pink;
  width: 100%;
  height: 400px;
  position: relative;
  box-sizing: border-box;
}
.content {
  background-color: brown;
  width: 100px;
  height: 100px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

方法6:フレキシブルボックスdisplay:flex;
前提:ブラウザ互換性はフレキシブルボックスをサポートし、独自の中央機能を備えています.

.container {
  background-color: pink;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 400px;
}
.content {
  background-color: brown;
}

方法7:表セルの垂直中央属性vertical-alignを使用します.
親div外層はdivを構成し、同時に表要素(display:table)に設定し、幅100%の親divは表セル要素(display:table-cell)親divは中央属性(vertical-align:middle)を構成し、子divの上下中性子divをmarginによって左右中央(margin-left:auto;margin-right:auto)に構成する

.container {
  background-color: pink;
  display: table;
  width: 100%;
}
.content {
  background-color: brown;
  /*width: 100%;    1，    100%*/
  height: 400px;
  display: table-cell;
  vertical-align: middle;
}
.son {
  width: 100px;
  height: 100px;
  margin: auto;
  background-color: orange;
}

備考:1、表のセルは特殊で、1つのセルしかない場合、その幅はデフォルトで親の幅の100%を占めます.2、tableのデフォルト幅は開かず、width:100%を手動で構成する必要がある.