记录实现水平垂直居中的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;
}
相关推荐
slim~11 分钟前
javaweb基础第一天总结(HTML-CSS)
前端·css·html
一支鱼16 分钟前
leetcode常用解题方案总结
前端·算法·leetcode
惜.己28 分钟前
针对nvm不能导致npm和node生效的解决办法
前端·npm·node.js
F2E_Zhangmo1 小时前
基于cornerstone3D的dicom影像浏览器 第二章 加载本地文件夹中的dicom文件并归档
前端·javascript·css
用户21411832636021 小时前
Nano Banana免费方案来了!Docker 一键部署 + 魔搭即开即用,小白也能玩转 AI 图像编辑
前端
Zacks_xdc2 小时前
【前端】使用Vercel部署前端项目,api转发到后端服务器
运维·服务器·前端·安全·react.js
给月亮点灯|2 小时前
Vue基础知识-脚手架开发-使用Axios发送异步请求+代理服务器解决前后端分离项目的跨域问题
前端·javascript·vue.js
张迅之2 小时前
【React】Ant Design 5.x 实现tabs圆角及反圆角效果
前端·react.js·ant-design
蔗理苦4 小时前
2025-09-05 CSS3——盒子模型
前端·css·css3
二川bro4 小时前
第25节:VR基础与WebXR API入门
前端·3d·vr·threejs