记录实现水平垂直居中的5种方法

记录块级元素实现水平垂直居中的方法,效果如图。

html 复制代码
<div class="parent">
  <div class="child">居中元素</div>
</div>


<style>
.parent {
  position: relative;
  width: 600px;
  height: 300px;
  background-color: #679389;
}
.child {
  width: 300px;
  height: 120px;
  background-color: #d8a7a0;
  text-align: center;
  line-height: 120px;
}
</style>

方法1: flex布局。给parent设置center_1。

css 复制代码
.center_1 {
  display: flex;
  justify-content: center;
  align-items: center;
}

方法2: grid布局。设置一个3x3的网格,将子元素放在中间个字中。给parent设置center_2 ,给child设置center_2--child

css 复制代码
.center_2 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
}
.center_2--child {
  grid-row-start: 2;
  grid-column-start: 2;
}

方法3: absolute+margin矫正偏移。给child设置center_3,此时margin矫正的位置分别是宽高的一半,因此需要知道子元素的宽高。

css 复制代码
.center_3 {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -60px;
  margin-left: -150px;
}

方法4: absolute+transfom矫正偏移。给child设置center_3。

css 复制代码
.center_4 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

方法5: display: table-cell。给parent 设置center_5,此时如果子元素为块级元素,text-align不会生效,可以给子元素child设置display: inline-block。

css 复制代码
.center_5 {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}
.center_5--child {
  display: inline-block;
}
相关推荐
西洼工作室9 分钟前
Strapi快速入门:从安装到API开发
前端·后端
繁花与尘埃17 分钟前
CSS简介(本文为个人学习笔记,内容整理自哔哩哔哩UP主【非学者勿扰】的公开课程。 > 所有知识点归属原作者,仅作非商业用途分享)
css·笔记·学习
光影少年22 分钟前
前端线上出现白屏如何排查问题所在,利用第三方的工具都有哪些
前端·学习·web安全·前端框架
濑户川26 分钟前
Vue3 计算属性与监听器:computed、watch、watchEffect 用法解析
前端·javascript·vue.js
_Sem35 分钟前
KMP实战:从单端到跨平台的完整迁移指南
android·前端·app
Carry34537 分钟前
React 与 Vue 开发差异——CSS 样式
前端
前端九哥40 分钟前
我删光了项目里的 try-catch,老板:6
前端·vue.js
2301_7644413341 分钟前
身份证校验工具
前端·python·1024程序员节
4Forsee1 小时前
【Android】View 事件分发机制与源码解析
android·java·前端
一 乐1 小时前
车辆管理|校园车辆信息|基于SprinBoot+vue的校园车辆管理系统(源码+数据库+文档)
java·前端·数据库·vue.js·论文·毕设·车辆管理