水平垂直居中的几种常见方式

最新推荐文章于 2024-05-21 21:13:29 发布

会喝水的旱鸭子

最新推荐文章于 2024-05-21 21:13:29 发布

阅读量95

点赞数

分类专栏：面试文章标签： css css3 前端

本文链接：https://blog.csdn.net/qq_38272894/article/details/128331059

版权

面试专栏收录该内容

2 篇文章 0 订阅

订阅专栏

水平垂直布局有很多种方式，这里只讲几种最常见，也是最常用到的四种，分别有flex布局、绝对定位、table布局、grid布局；

一.flex布局

父元素设置diaplay: flex;align-items: center; justify-content: center;
父元素设置display: flex;子元素设置margin:auto;

<div class="parent1">
  <div class="child1">水平垂直居中1</div>
</div>
<div class="parent2">
  <div class="child2">水平垂直居中2</div>
</div>
<style>
.parent1 {
  width: 200px;
  height: 200px;
  border: 1px solid;
  display: flex;
  align-items: center;
  justify-content: center;
}
.child1 {
  background: red;
}

.parent2 {
  width: 200px;
  height: 200px;
  border: 1px solid;
  display: flex;
}
.child2 {
  background: red;
  margin: auto;
}  
</style>

二.绝对定位

父元素设置position: relative;子元素设置position: absolute;

<div class="parent">
  <div class="child">水平垂直居中</div>
</div>
<style>
.parent {
  width: 200px;
  height: 200px;
  border: 1px solid;
  display: block;
  position: relative;
}
.child {
  background: red;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
</style>

三.table布局

父元素设置display: table;vertical-align: middle; text-align:center;

<div class="parent">
  <div class="child">水平垂直居中</div>
</div>
<style>
.parent {
  width: 200px;
  height: 200px;
  border: 1px solid;
  display: table-cell;
  vertical-align: middle;  
  text-align: center;
}
.child {
  background: red;
  display: inline-block;
}
</style>

四.grid布局

grid布局和flex布局相似

<div class="parent1">
  <div class="child1">水平垂直居中1</div>
</div>
<div class="parent2">
  <div class="child2">水平垂直居中2</div>
</div>
<style>
.parent1 {
  width: 200px;
  height: 200px;
  border: 1px solid;
  display: grid;
  align-items: center;
  justify-content: center;
}
.child1 {
  background: red;
}
.parent2 {
  width: 200px;
  height: 200px;
  border: 1px solid;
  display: grid;
}
.child2 {
  background: red;
  margin: auto;
}  
</style>