css 垂直居中和水平居中

偏执的太偏执、 2022-03-14 18:22 564阅读 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%;
    }
    解释如图：

在这里插入图片描述

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

二、垂直居中

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

  2. 块元素居中

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

    不知盒子的高度：
    方法二： 绝对定位与margin
    父元素 position: relative
    子元素
    position:absolute;

    1. margin:auto;
    2. top:0;
    3. bottom:0;
    4. left:0;
    5. right:0;

    方法三：Css3显威力（很通用，无需设置宽高）
    父元素 position: relative
    子元素
    position: absolute;

    1. top: 50%;
    2. left: 50%;
    3. transform: translate(-50%, -50%);  // 移动

    方法四：flex布局

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

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

发表评论

表情：
评论列表 （有 0 条评论，564人围观）

还没有评论，来说两句吧...

相关阅读

    相关 CSS水平垂直居中

            在实际前端开发中，我们会遇到让一些元素居中的情况，如水平居中、垂直居中或者水平垂直居中等等。CSS的表示方法有很多，现在小编在这里总结一下，以便开发的时候可以快

    不念不忘少年蓝@不念不忘少年蓝@/ 0 赞/ 517 阅读