水平方向中央揃えの実装

幅の要素を水平方向に中央に配置するには

1.この要素の親にmargin:0 autoを設定することで実現できます.HTML:

    
      

        

          center
        
      
    

CSS:

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

このとき,要素を検査すると内層のdivが中央に実現されることが最もよく知られており,サブ要素の幅を設定する必要があるという欠点がある.2.positionによるHTMLの位置決め:

  

    

      
center
    
  

CSS:

   div {
      float: left;
      width: 100%;
      position: relative;
    }
    ul {
      position: absolute;
      left: 50%;
      width: 200px;
      margin-left: -100px;
    }

幅を指定しない要素が中央に配置されています

1.サブエレメントにdisplay:inline-black、親エレメントにtext-align:centerを設定します.HTML:

  

    

      center
    
  

CSS:

    div {
      text-align: center;
    }
    p {
      display: inline-block;
    }

2.要素がfloatに設定されると、その幅はその内容によって広げられ、positon位置決めによって横方向中央を実現する.HTML:

  

    

        
center
    
  

CSS:

    div {
      float: left;
      width: 100%;
      position: relative;
    }
    ul {
      position: relative;
      left: 50%;
      float: left;
    }
    li {
      float: left;
      position: relative;
      right: 50%;
      display: block;
    }

3.flexレイアウト、justify-content:center;主軸が中央になる.align-items:center;交差軸が中央になります.flex-directionプロパティを設定すると、主軸の方向が変わります.4.css width:fit-contentプロパティ.5.css 3のtransformHTMLで:

    

      center
    
  

CSS:

    div {
      position: relative;
    }
    .test {
      position: relative;
      left: 50%;
      float: left;
      transform: translateX(-50%);
    }

まとめると、margin:0 autoのような比較的直接的な方法があります.この方法の互換性はよく、副作用はありませんが、この方法の最も主要な欠陥は、サブ要素の幅が固定されている場合にのみ適用されることです.あるいはcss 3の固有属性flexレイアウトやwidth:fix-contentという方法で実現するのは簡単で直接的ですが、古いバージョンのブラウザを処理する際に深刻な互換性の問題があります.また、間接的な実現方式はpositionによって位置づけられ、具体的な思想は主にサブ要素が親要素の2分の1の位置に移動し、relative、あるいはabsoulteが実現することができ、それからサブ要素を左に自分の2分の1の位置に移動することであり、このような方式は広く適用性があるが、構想は複雑である可能性がある.

垂直方向中央揃えの実装スキーム

1.css 3のtransform属性とpostionで位置決めし、上の水平中央と同様にtop:50%、translateY(-50%)に変更すればよい.2.親要素displayの設定:table;サブエレメントdispaly:table-cell,vertical-align:middle;3.絶対位置HTML:

  

    

      nnnnnnn
    
  

CSS:

    .parent {
      position: relative;
      height: 400px;
    }
    .child {
      margin: auto;
      height: 200px;
      position: absolute;
      top:0;
      bottom: 0;
    }

4.1行のテキストの場合、heightはline-heightと同じようにテキストの中央を実現するように設定できます.5.外距離marginは負数をとり、大きさはwidth/heightの半分で、top:50%を加える.left: 50%;