css 垂直居中和水平居中

偏执的太偏执、 2022-03-14 18:22 436阅读 0赞

一、 水平居中

1.  行内元素inline、inline-block  
    行内元素水平居中，直接在父盒子中设置`text-align:center`
2.  块元素居中

已知盒子的宽度：
    方法一：  margin : 0 auto;   // 最简单实现
    方法二：  position: absolute; left： 50%; margin-left: -(宽度值/2);
     // 绝对定位，左侧盒子的一般的宽度

未知盒子的宽度：
    方法三：dispaly: inlint-block;
    父元素设置： text-align: center;
    方法四： 绝对定位
    在知道盒子宽度的时候，我们可以margin-left盒子宽度的一半，在不知道盒子宽度的情况下也可以水平居中
    .pagination {
      position: relative;
    }
    .pagination ul {
      position: absolute;
      left: 50%;
    }
    .pagination li {
      line-height: 25px;
      margin: 0 5px;
     float: left;
      position: relative;    /*注意，这里不能是absolute*/
      right: 50%;
    }
    解释如图：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhbmlfd2Vu_size_16_color_FFFFFF_t_70]

方法五：CSS3的flex实现水平居中
    父盒子设置
     #container{
        justify-content:center;
        display:flex;
     }

二、垂直居中

1.  行内元素inline、inline-block  
    行内元素垂直居中，直接在父盒子中设置`display:table-cell;vertical-align:middle`
2.  块元素居中

已知盒子的高度:
    方法一： 绝对定位
     position: absolute; top： 50%; margin-top: -(高度值/2);

不知盒子的高度：
    方法二： 绝对定位与margin
    父元素  position: relative
    子元素 
       position:absolute;
        margin:auto;
        top:0;
        bottom:0;
        left:0;
        right:0;
    方法三：Css3显威力（很通用，无需设置宽高）
    父元素  position: relative
    子元素  
       position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);  // 移动
     方法四：flex布局
        父元素设置
        display:flex;
        align-items: center;

总结：CSS3的transform和flex固然好用，但在项目的实际运用中必须考虑兼容问题  
某些浏览器仍需使用前缀写法: `display: -webkit-flex; //Safari仍旧需要使用特定的浏览器前缀`

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhbmlfd2Vu_size_16_color_FFFFFF_t_70]: /images/20220311/cd68611990d245229ed6f08072119c4b.png