CSS水平垂直居中(最常见的三种方案flex、grid、absolute)

本文简单介绍一下现代 CSS 中最常见的三种水平垂直居中方案。

html:

html 复制代码
<div class="container">
  <div class="content"></div>
</div>

css:

css 复制代码
.container {
  width: 500px;
  height: 500px;
  border: 1px solid #000;

  .content {
    width: 200px;
    height: 200px;
    background-color: #ccc;
  }
}

Flex 布局

方案1:父元素设置 flex 布局,并设置主轴以及交叉轴的对齐方式:

css 复制代码
.container {
  width: 500px;
  height: 500px;
  border: 1px solid #000;
  display: flex;
  justify-content: center;
  align-items: center;

  .content {
    width: 200px;
    height: 200px;
    background-color: #ccc;
  }
}

方案2:父元素设置 flex 布局,子元素设置 margin: auto

css 复制代码
.container {
  width: 500px;
  height: 500px;
  border: 1px solid #000;
  display: flex;

  .content {
    width: 200px;
    height: 200px;
    background-color: #ccc;
    margin: auto;
  }
}

Grid 布局

父元素设置 grid 布局,以及 place-items: centerplace-itemsalign-itemsjustify-items 的简写形式。

Grid 的兼容性不如 Flex,对于一些比较老的浏览可能不太支持。

css 复制代码
.container {
  width: 500px;
  height: 500px;
  border: 1px solid #000;
  display: grid;
  place-items: center;

  .content {
    width: 200px;
    height: 200px;
    background-color: #ccc;
  }
}

绝对定位 absolute

使用绝对定位会使元素脱离文档流,一般常用于弹窗、对话框等。

父元素设置相对定位,子元素设置绝对定位,设置 top、left 以及 transform。

css 复制代码
.container {
  position: relative;
  width: 500px;
  height: 500px;
  border: 1px solid #000;

  .content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200px;
    height: 200px;
    background-color: #ccc;
  }
}

topleft属性都设置为50%。这会将.content元素的左上角定位到其父元素(.container)的中心。transform: translate(-50%, -50%);被应用到.content元素上。这会将.content元素自身向左和向上移动其自身宽度和高度的50%,从而使得.content元素的中心与其父元素的中心对齐,实现了居中。

相关推荐
m512710 分钟前
LinuxC语言
java·服务器·前端
Myli_ing1 小时前
HTML的自动定义倒计时,这个配色存一下
前端·javascript·html
dr李四维1 小时前
iOS构建版本以及Hbuilder打iOS的ipa包全流程
前端·笔记·ios·产品运营·产品经理·xcode
雯0609~2 小时前
网页F12:缓存的使用(设值、取值、删除)
前端·缓存
℘团子এ2 小时前
vue3中如何上传文件到腾讯云的桶(cosbrowser)
前端·javascript·腾讯云
学习前端的小z2 小时前
【前端】深入理解 JavaScript 逻辑运算符的优先级与短路求值机制
开发语言·前端·javascript
彭世瑜2 小时前
ts: TypeScript跳过检查/忽略类型检查
前端·javascript·typescript
FØund4042 小时前
antd form.setFieldsValue问题总结
前端·react.js·typescript·html
Backstroke fish2 小时前
Token刷新机制
前端·javascript·vue.js·typescript·vue
小五Five2 小时前
TypeScript项目中Axios的封装
开发语言·前端·javascript