CSS中实现水平居中、垂直居中的几种方法

原创已于 2023-06-07 13:47:07 修改 · 2.8k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#水平居中 #垂直居中 #CSS

于 2023-03-28 11:35:49 首次发布

文章介绍了五种CSS实现元素居中的方法，包括：文字行元素的水平垂直居中、基于绝对定位的居中、使用CSS变形的居中、flex布局居中以及利用vertical-align和line-height的垂直居中。每种方法都有其适用场景和优缺点，如固定宽高的绝对定位、无需固定尺寸的变形居中以及对旧浏览器的支持情况。

方法一：针对文字、行元素水平居中、垂直居中

{
    text-align: center; // 水平居中
    line-height： 盒子高度； // 垂直居中，只适合行元素
}

优势：简单、实用；

劣势：只适合单行的文字、行元素内容；

方法二：基于已知盒子宽度、高度的情况下，实现盒子居中；

{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200px;
    height: 100px;
    margin-top: -50px; // 盒子的一半高度
    margin-left: -100px; // 盒子的一半宽度
}

// 以上代码可优化为下方代码：
{
    position: absolute;
    width: 200px;
    height: 100px;
    top: calc(50% - 50px);
    left: calc(50% - 100px);
}

优势：行元素、块元素均可实现居中；

劣势：需要固定盒子的宽、高；

方法三：使用绝对定位 + CSS变形实现盒子居中

{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

优势：行元素、块元素均可实现居中，且不需要固定盒子的宽、高；

劣势：当盒子的高度超高屏幕的高度，盒子的顶部会被视口裁切掉；【视口：表示视觉看到的屏幕宽高】

方法四：使用flex布局实现盒子居中

// 父盒子
{
    display: flex;
}
// 子盒子
{
    margin: auto;
}

优势：实现简单，不需要对父盒子、子盒子的大小进行任何设置；

劣势：一些低版本的浏览器可能不支持；

方法五：使用 vertical-align + line-height 属性垂直居中

.div {
    width: 364px;
    height: 221px;
    line-height: 221px;
    text-align: center;
    img {
      vertical-align: middle;
      width: 48px;
      height: 48px;
    }
  }

优势：实现简单、方便，与方法一类似；

劣势：需要知道父容器的高度，适用于div中的图片垂直居中等场景；

以上内容是本人在开发中总结的居中方法，如有雷同，纯属巧合！另外，如有错误，欢迎指出！