css图片垂直居中_【CSS】实现水平垂直居中的方式

CSS实现水平垂直居中的方式

文章估计阅读时间【5】分钟

居中元素定宽高

一、absolute+负margin

1、父元素相对定位，子元素绝对定位

2、因为绝对定位的百分百是相对于父元素的宽高，但绝对定位是基于元素的左上角

3、借助外边距的负值，设置子元素的外边距为子元素宽度一般的负值优点：好理解，兼容性也比较好

缺点：需要知道子元素的宽高

后面的代码示例均以这个例子进行改动

class="wp">
    <div class="box size">定宽高div>
  div>


二、absolute+margin auto

1、设置各个方向的距离都是0

2、将margin设为auto，就可以实现各个方向的居中优点：兼容性挺好

缺点：需要知道子元素的宽高

代码只要改变子元素的样式

.box{
      background-color: coral;
      position: absolute;
      top: 0;
      left:0;
      right: 0;
      bottom: 0;
      margin: auto;
    }

三、absolute+calc

1、css3计算属性

2、top的百分比是基于元素的左上角，减去宽度的一半就好

缺点：需要知道子元素的宽高，兼容性依赖calc的兼容性

 .box{
      background-color: coral;
      position: absolute;
      top:calc(50%-50px);
      left:calc(50%-50px);
    }

居中元素不定宽高

一、absolute+transform

优点：不需要知道子元素的宽高，

缺点：兼容性依赖translate的兼容性

class="wp">
    <div class="box">定宽高div>
  div>


 .box{
      background-color: coral;
      position: absolute;
      top:50%;
      left:50%;
      transform: translate(-50%,-50%);
    }

二、line-height

1、利用行内元素居中属性

2、把盒子设置成行内元素

3、通过text-align做到水平居中

4、通过vertiacl-align做到垂直居中

优点：不需要知道子元素的宽高，

缺点：需要在子元素中将文字显示重置为想要的效果

 .wp{
      border:1px solid red;
      width: 300px;
      height: 300px;
      line-height: 300px;
      text-align: center;
      font-size: 0px;  
    }
    .box{
      background-color: coral;
      font-size: 16px;
      display: inline-block;
      vertical-align: middle;
      line-height: initial;
      text-align: left;  
      /* 修正文字 */
    }
   

三、flex布局

优雅的实现水平垂直居中

  .wp{
      border:1px solid red;
      width: 300px;
      height: 300px;
      display: flex;
      justify-content: center;
      align-items: center;
    }

四、grid布局

优点：代码量少缺点：兼容性不如flex

   .wp{
      border:1px solid red;
      width: 300px;
      height: 300px;
      display: grid;   
    }
    .box{
      background-color: coral;
      align-self: center;
      justify-self: center;
    }

五、css-table

 .wp{
      border:1px solid red;
      width: 300px;
      height: 300px;
      display:table-cell;   
      text-align: center;
      vertical-align: middle;
    }
    .box{
      background-color: coral;
     display: inline-block;
    }

图片有点错，中间元素字也是居中的哦

总结

1、宽高固定，pc端有兼容性  absolute+负margin

2、宽高不固定， pc端有兼容性  css-table

3、pc端无兼容要求  flex布局

4、移动端 flex布局




—END—