css样式居中

水平居中

1.块级元素

margin: 0 auto;

.container{
      height: 100px;
      width: 300px;
      border: 1px solid red;
    }
    .content{
      width: 60px;
      border: 1px solid green;
      /* 起作用的是margin */
      margin: 0 auto;
    }

 

2.内联元素

块级元素转为内联块级元素使用text-alien:center

.container{
      height: 100px;
      width: 300px;
      border: 1px solid red;
      /* 文字居中 */
      text-align: center; 
    }
    .content{
      /* 块级元素转内联元素 */
      display: inline-block;
      border: 1px solid green;
    }

水平垂直居中

1. flex布局

   设置父元素
   1.display:flex
   2.align-items:center

   .container{
         height: 100px;
         width: 300px;
         border: 1px solid red;
         //关键属性
         display: flex;
         align-items: center; //垂直居中
         justify-content: center;//水平居中
       }
       .content{
         border: 1px solid green;
       }

    

2. margin+position:absolute 布局

   position: absolute;布局的元素,通过设置top/bottom,left/right这两对属性,可以让元素在
                     垂直方向和水平方向分别具有自适应的特性,就像div在水平方向的默认表现一样.
   而设置宽高然后再配合margin:auto,就可以实现水平居中

   
   .container{
         height: 100px;
         width: 300px;
         border: 1px solid red;
         position: relative;
       }
       .content{
         position: absolute;
         left: 0;
         right: 0;
         bottom: 0;
         top: 0;
         width: 60px;
         height: 20px;
         margin: auto;
         border: 1px solid green;
       }

    

3. transform+absolute

    absolute定位元素的left/top属性是子元素相对于父元素进行定位,transform中的translate属性进行移动(移动的数值为子元素自身的一半(50%))

      .container{
         height: 100px;
         width: 300px;
         border: 1px solid red;
         position: relative;
       }
       .content{
         position: absolute;
         left: 50%;
         top: 50%;
         transform: translate(-50%, -50%);
         border: 1px solid green;
       }

    

4. absolute+margin负值
   此方法与③类似,子元素移动方法变更为margin负值

     .container{
         height: 100px;
         width: 300px;
         border: 1px solid red;
         position: relative;
       }
       .content{
         width: 60px;
         height: 50px;
         position: absolute;
         left: 50%;
         top: 50%;
         margin: -25px 0 0 -30px;
         border: 1px solid green;
       }

5. absolute+calc

   calc可以给元素做计算，使用指定的单位值计算出长度值，语法为“元素{长度属性:calc(表达式)}”

       .container{
         height: 100px;
         width: 300px;
         border: 1px solid red;
         position: relative;
       }
       .content{
         width: 60px;
         height: 50px;
         position: absolute;
         left: calc(50% - 30px);
         top: calc(50% - 25px);
         border: 1px solid green;
       }

6. line-height+vertical-align

     vertical-align 只对行内元素、行内块元素和表格单元格元素生效：不能用它垂直对齐块级元素   

   .container{
         height: 100px;
         width: 300px;
         line-height: 100px;
         border: 1px solid red;
         text-align: center;
       }
       .content{
         display: inline-block;
         line-height:1.5;
         vertical-align: middle;
         border: 1px solid green;
       }