div居中的方式

一、水平居中

1. 文本水平居中：css样式加text-align:center;
2. 绝对定位居中

   <style>
   /*父元素定义*/
   .div1{
     position: relative;
   }
   /*居中元素样式*/
   .div2{
     width: 50px;
     height: 50px;
     position: absolute;
     top: 0;
     left: 50%;
     transform: translateX( -50% );
   }
   </style>
    
   <div class="div1">
     <div class="div2"></div>
   </div>

3. margin: 0 auto属性

二、垂直居中

1. 文本垂直居中：将行高line-height设置成和高度height一样大小

2.   绝对定位

   <style>
   /*父元素定义*/
   .div1{
     position: relative;
   }
   /*居中元素样式*/
   .div2{
     width: 50px;
     height: 50px;
     position: absolute;
     top: 50%;
     left: 0;
     transform: translateY( -50% );
   }
   </style>
    
   <div class="div1">
     <div class="div2"></div>
   </div>

三、水平垂直居中

1. 绝对定位

   <style>
   /*父元素定义*/
   .div1{
     position: relative;
   }
   /*居中元素样式*/
   .div2{
     width: 50px;
     height: 50px;
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate( -50% , -50% );
   }
   </style>
    
   <div class="div1">
     <div class="div2"></div>
   </div>