技術標籤：cssHtmlhtmlcssflexless

在html學習或網頁開發中，會遇到需要設定水平居中的場景，但不同型別的元素水平/垂直居中有不同書寫格式或者程式碼，現在我來盤點一下：

宣告：水平居中是相對於x軸而言：

垂直居中是相對於y軸而言：

1：行內元素：

（1）：水平居中：

（a）：text-align: center; （注：通常給父元素新增該語法）

        /* div為span的父元素 */
        div {
            text-align: center;
            width: 500px;
            height: 500px;
            background-color: pink;
        }
        <
 
div><span>123</span></div>

（b）： 用flex彈性佈局：父元素： display: flex; flex-direction: column; 子元素： align-self: center;

     div {
         display: flex;
         width: 500px;
         height: 500px;
         background-color: pink;
         flex-direction: column;
     }
     span {
         align-self: center;
     }
      <
 
div><span>123</span></div> >

（c）：將行內元素轉換為塊級元素設定寬高，再利用margin：0 auto；（和下面一致，都可以互相轉換）

     div {
         width: 500px;
         height: 500px;
         background-color: pink;
     }
     
     span {
         display: block;
         width: 50px;
         height: 50px;
         margin: 0 auto;
     }
 

（d）：父元素：position: relative;
子元素： position: absolute;
left: 50%;
transform: translateX(-50%);

      div {
          position: relative;
          width: 500px;
          height: 500px;
          background-color: pink;
      }
      
      span {
          position: absolute;
          left: 50%;
          transform: translateX(-50%);
          width: 50px;
          height: 50px;
      }

（2）：垂直居中：

（a）：line-height: 100px;（注：行高和父盒子高度一致，比如父元素高為100px，此處就該為100px）

     div {
         width: 500px;
         height: 500px;
         background-color: pink;
     }
     
     span {
         width: 50px;
         height: 50px;
         line-height: 500px;
     }

（b）：利用3D,position: absolute;
top: 50%;
transform:translateY(50%)

      div {
          position: relative;
          width: 500px;
          height: 500px;
          background-color: pink;
      }
      
      span {
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          width: 50px;
          height: 50px;
      }

2：塊級元素：

（1）：水平居中：

（a）：margin: 0 auto; （設定高寬，最常用）

       div {
          width: 500px;
          height: 500px;
          background-color: pink;
      }
      
      div div {
          width: 100px;
          height: 100px;
          background-color: skyblue;
          margin: 0 auto;
      }

（b）：用flex彈性佈局：父元素：display: flex;
flex-direction: column;
子元素：align-self: center;

     div {
         display: flex;
         width: 500px;
         height: 500px;
         background-color: pink;
         flex-direction: column;
     }
     
     div div {
         align-self: center;
         width: 100px;
         height: 100px;
         background-color: skyblue;
     }

（c）：
利用父相子絕，父元素：position: relative;
子元素： position: absolute;
left: 50%;
margin-left: -50%;

      div {
         width: 500px;
         height: 500px;
         background-color: pink;
     }
     
     div div {
         width: 100px;
         height: 100px;
         background-color: skyblue;
         margin: 0 auto;
     }

（d）：
父元素：position: relative;
子元素： position: absolute;
left: 50%;
transform: translateX(-50%);

     div {
         position: relative;
         width: 500px;
         height: 500px;
         background-color: pink;
     }
     
     span {
         position: absolute;
         left: 50%;
         transform: translateX(-50%);
         width: 50px;
         height: 50px;
     }

（2）：垂直居中：

（a）：父元素：position: relative;
子元素： position: absolute;
top: 50%;
transform: translateY(-50%);

      div {
          position: relative;
          width: 500px;
          height: 500px;
          background-color: pink;
      }
      
      div {
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          width: 50px;
          height: 50px;
      }

（b）：父元素： display: table-cell;
vertical-align: middle;
text-align: center;

     div {
         display: table-cell;
         vertical-align: middle;
         text-align: center;
         width: 500px;
         height: 500px;
         background-color: pink;
     }
     
     div div {
         width: 100px;
         height: 100px;
         background-color: skyblue;
     }

總結：行內元素和塊元素可以相互轉換，因此方法千萬種，對一種熟練應用即可

作者：劉港輝
本文源自：《 普歌-赤道團隊：文字，圖片，行內塊元素/塊級元素水平/垂直居中合集(內容較多，建議收藏)》
本文版權歸作者所有，歡迎轉載。
如果有不足，歡迎雅正留言