元素水平垂直居中的六种方式

最新推荐文章于 2023-09-30 13:11:25 发布

俊小赞

最新推荐文章于 2023-09-30 13:11:25 发布

阅读量816

点赞数 4

分类专栏： # Css 文章标签： css

本文链接：https://blog.csdn.net/weixin_44808483/article/details/108268583

版权

Css 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

文章目录

前言
代码预设
一、绝对定位 + transform
二、绝对定位 + margin
- 1.不用子盒子的宽高
- 2.需要子盒子的宽高
三、table-cell 属性
四、flex 布局
五、calc() 函数
总结

前言

让元素同时实现水平垂直，是我们前端开发所经常遇到的，本文将介绍六种常见的方式，以便你的参考供用。

代码预设

下面将会介绍到的六种方法均是使用了这里的 HTML 结构和 css 主体样式。

<!-- css -->
<style>
  body {
    margin: 0;
    padding: 0;
  }
  .parents {
    width: 100vw;
    height: 100vh;
  }
  .children {
    width: 300px;
    height: 300px;
    background-color: #2980b9;
  }
</style>

<!-- html -->
<body>
  <div class="parents">
    <div class="children"></div>
  </div>
</body>

一、绝对定位 + transform

通过设置父盒子相对定位，子盒子绝对定位并 top 和 left 距离50%，实现了子盒子左上角点居中，再通过 transform: translate(-50%, -50%); 属性来实现子盒子的中心点居中。

注意：需要添加浏览器前缀进行兼容。

  .parents {
    position: relative;
  }
  .children {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
  }

二、绝对定位 + margin

1.不用子盒子的宽高

通过设置父盒子相对定位，子盒子绝对定位，top、right、bottom、left 均为0，再通过 margin: auto; 属性来实现子盒子的水平垂直居中。

  .parents {
    position: relative;
  }
  .children {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
  }

2.需要子盒子的宽高

通过设置父盒子相对定位，子盒子绝对定位并 top 和 left 距离50%，实现了子盒子右上角居中，然后利用 margin-top 和 margin-left 属性等于盒子的负宽高，来实现子盒子的中心点居中。

注意：需要知道子盒子的宽度和高度。

  .parents {
    position: relative;
  }
  .children {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -300px;
    margin-left: -300px;
  }

三、table-cell 属性

通过设置子盒子为 display: table-cell; 显示类型，并分别通过 text-align: center; 和 vertical-align: middle; 实现了子盒子内的文本水平垂直居中。

注意：水平垂直居中的是盒子中的文本段落。

  .children {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
  }

四、flex 布局

通过设置父盒子为 display: display; 显示类型，并分别通过 justify-content: center; 和 align-items: center; 实现父盒子中的主轴、交叉轴居中，从而让子盒子水平垂直居中。

注意：需要添加浏览器前缀进行兼容。

  .parents {
    display: flex;
    -webkit-display: flex;
    justify-content: center;
    -webkit-justify-content: center;
    align-items: center;
    -webkit-align-items: center;
  }

五、calc() 函数

calc() 函数是 css 中用于动态计算长度值，运算符 ”-“ 前后都需要保留一个空格。

注意：需要添加浏览器前缀进行兼容。

  .parents {
    position: relative;
  }
  .children {
    position: absolute;
    top: calc((100vh - 300px) / 2);
    top: -webkit-calc((100vh - 300px) / 2);
    left: calc((100vw - 300px) / 2);
    left: -webkit-calc((100vw - 300px) / 2);
  }

总结

以上就是今天要讲的内容，本文介绍了六种让元素水平垂直居中的方法，而我个人常用的是绝对定位 + transform 方式，希望可以通过练习，在不同的情景之下使用最优的居中方式。

俊小赞

关注

4
点赞
踩
9

收藏

觉得还不错? 一键收藏
打赏
1
评论
元素水平垂直居中的六种方式

文章目录前言代码预设一、绝对定位 + transform二、绝对定位 + margin1.不用子盒子的宽高2.需要子盒子的宽高三、table-cell 属性四、flex 布局五、calc() 函数总结前言让元素同时实现水平垂直，是我们前端开发所经常遇到的，本文将介绍六种常见的方式，以便你的参考供用。代码预设下面将会介绍到的六种方法均是使用了这里的 HTML 结构和 css 主体样式。<style> body { margin
复制链接

扫一扫