水平居中方案

1. 行內元素的水平居中

   • 對父元素設置 text-align: center;

     <div class="parent">
         <span class="child">我是行內元素 在父元素內水平居中</span>
     </div>
     
     <style>
         .parent {
             text-align:center;
         }
     </style>
     

2. 定寬塊狀元素的水平居中方案

   <div class="parent">
     <div class="child" style="width: 100px;">
       另一種方法是使用table標簽 讓其表現為inline-block
     </div>
   </div>
   

   • 對定寬子元素設置 .child: {margin: 0 auto; }

   • 絕對定位和負邊距

     .parent {
       background: yellow;
       height: 200px;
       position: relative;
     }
     
     .child {
       width: 100px;
       background: red;
       /*這個是最簡單的*/
       /* margin: 0 auto; */
       
       position: absolute;
       left: 50%;
       margin-left: -100px; /*是根據自身的寬度width: 200px*50% 計算得來*/
       /*更好的方案是使用 transform: translateX(-100px)*/
     }
     

     定寬水平居中

3. 不定寬塊狀元素的水平居中方案

   • 對齊添加table標簽, tbody, tr, td同樣添加上, 然后將table看成定寬元素設置margin: 0 auto;
     對于定寬塊狀也可以使用這種方案
     缺點: 增加多余的標簽, 不夠語義化;

     <div class="parent">
         <table class="table-center">
             <tbody>
                 <tr>
                     <td>
                         <div class="child">table居中方案</div>
                     </td>
                 </tr>
             </tbody>
         </table>
     </div>
     
     <style>
         .parent {
             background: yellow;
         }
         .table-center {
             margin: 0 auto;
         }
     </style>
     

     table水平居中

   • 父元素浮動相對定位(寬度由子元素撐起),子元素相對自身向左移動50%的寬度距離

     <style>
     .container {
         background: dodgerblue;
         overflow: hidden;
         height: 200px;
     }
     .parent {
         float: left;
         position: relative;
         left: 50%;
     }
     .child {
         position: relative;
         left: -50%;
         background: red;
     }
     </style>
     

     定寬浮動定位

垂直居中方案

1. 行內元素的垂直居中

   • line-height針對單行元素居中方案 使line-height = height

     <div class="container" style="height: 200px;">
       <span class="child" style="line-height: 200px;">
         單行行內元素的垂直居中
       </span>
     </div>
     

   • 針對多行的display:table-cell方案

     <style>
     .container {
       height: 200px;
       background-color: dodgerblue;
       text-align: center;
       display: table-cell;
       vertical-align: middle;
       /* margin-left: 20px; */
     }
     
     .child {
       /* line-height: 200px; */ /*單行情況下只設置行高等于高度 可以滿足垂直居中*/
     }
     </style>
     
     <div class="container">
       <span class="child">
         多行行內元素的垂直居中 <br>
         多行行內元素的垂直居中 <br>
         多行行內元素的垂直居中 <br>
         多行行內元素的垂直居中 <br>
         多行行內元素的垂直居中 <br>
         多行行內元素的垂直居中 <br>
       </span>
     </div>
     
     <div class="description" style="margin-top: 30px">
       <p>1. 使用了display:table-cell后margin不起作用 
       </p><p>2. 但值得注意的是：table-cell會被其他一些css屬性破壞，比如float和position:absolute等等。
     </p></div>
     

2. 塊狀元素的垂直居中方案

   • line-height=height方案 (針對單行元素)

   • display:table-cell 和行內元素類似 (多行和單行)

   • 定高父元素和定高子元素的垂直居中

     <div class="parent">
       <div class="child">child元素定高</div>
     </div>
     
     <style>
     .parent {
       height: 300px;
       background: yellow;
       margin: 0 auto;
       position: relative;
     }
     
     .child {
       position: absolute;
       border: 1px solid red;
       height: 100px;
       
       /*垂直居中  對于父元素和當前元素的高度已知的情況下*/
       top: 50%;
       margin-top: -50px;
       
       /*水平居中*/
       left: 50%;
       /* margin-left: -100px;  開啟CPU渲染*/
       transform: translateX(-100px);
     }
     </style>
     

     父元素和子元素定高

   • flex實現(見下方)

同時水平居中和垂直居中

1. flex方案

   .parent {
     height: 300px;
     background: dodgerblue;
     display: flex;
     align-items: center;
     justify-content: center;
   }
   
   .child {
     width: 500px;
     background: #aaa;
     text-align: center;
   }
   

   flex水平垂直居中

2. 子元素和父元素定寬定高下的方案

   .parent {
     /* width: 500px; */
     height: 300px;
     background: yellow;
     margin: 0 auto;
     position: relative;
   }
   
   .child {
     position: absolute;
     border: 1px solid red;
     height: 100px;
     width: 200px;
     
     /*垂直居中  對于父元素和當前元素的高度已知的情況下*/
     top: 50%;
     margin-top: -50px;
     
     /*水平居中*/
     left: 50%;
     /* margin-left: -100px;  開啟CPU渲染*/
     transform: translateX(-100px);
   }
   

   絕對定位和負邊距