让不定宽高的div，垂直水平居中

最新推荐文章于 2023-12-28 14:01:48 发布

原创最新推荐文章于 2023-12-28 14:01:48 发布 · 203 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #css3 #html

css3 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了三种方法使div在垂直水平方向上居中对齐：1) 使用transform属性，通过相对定位和translate调整；2) 利用flex布局，设置justify-content和align-items为center；3) 绝对定位，结合top, bottom, left, right和margin自动。这些方法适用于不同场景，帮助开发者灵活实现元素居中效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

如何让一个div在垂直水平方向上居中对齐？

方法一：使用transform

.parent {
  background-color: #fff;
  width: 400px;
  height: 400px;
}
.son {
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: pink;
}

方法二： flex弹性布局

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 400px;
  height: 400px;
  background-color: #fff;
}
.son {
  background-color: pink;
}

方法三：绝对定位

.parent {
  position: relative;
  width: 400px;
  height: 400px;
  background-color: #fff;
}
.son {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  background-color: pink;
}