css 水平 垂直居中方案

水平居中方案

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);
   }
   

   绝对定位和负边距