首页 前端知识 CSS中实现水平居中、垂直居中的几种方法

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

2024-02-24 14:02:50 前端知识 前端哥 683 782 我要收藏

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

{
    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中的图片垂直居中等场景;

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

转载请注明出处或者链接地址:https://www.qianduange.cn//article/2587.html
评论
发布的文章

程序员的中秋节

2024-03-09 09:03:01

js中几种追加元素的方法

2024-03-08 10:03:38

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!