当前位置：首页 > article >正文

使用CSS快速居中div的七种方法

article 2025/3/4 19:38:37

方法一：Flex布局

使用Flex布局是最简单的方法之一。只需在父容器中添加display: flex、justify-content: center和align-items: center即可实现水平和垂直居中。

.flex-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f0f0f0;
}

.flex-box {
  background-color: #4caf50;
  color: white;
  padding: 20px;
  font-size: 20px;
}

方法二：Margin Auto

通过设置margin: auto并指定宽度和高度，可以使元素在其父容器中居中。

.margin-auto {
  width: 200px;
  height: 100px;
  margin: auto;
  background-color: #2196f3;
}

.container {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

方法三：Inline Block

使用inline-block和text-align: center可以实现水平居中。

.inline-block-container {
  text-align: center;
  height: 100vh;
  display: flex;
  align-items: center;
}

.inline-block-box {
  display: inline-block;
  background-color: #ff9800;
  padding: 20px;
}

方法四：绝对定位 + Transform

结合绝对定位和transform属性，可以实现精确的居中效果。

.absolute-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #e91e63;
  padding: 20px;
}

方法五：Grid布局

使用CSS Grid布局，可以轻松实现居中。

.grid-container {
  display: grid;
  place-items: center;
  height: 100vh;
  background-color: #f0f0f0;
}

.grid-item {
  background-color: #673ab7;
  padding: 20px;
}

方法六：Table布局

利用表格布局的特性，也可以实现居中效果。

.table-container {
  display: table;
  width: 100%;
  height: 100vh;
  text-align: center;
}

.table-cell {
  display: table-cell;
  vertical-align: middle;
}

.table-content {
  background-color: #3f51b5;
  padding: 20px;
  margin: 0 auto;
}

方法七：相对定位 + Transform

结合相对定位和transform属性，实现灵活的居中。

.relative-container {
  position: relative;
  height: 100vh;
  background-color: #f0f0f0;
}

.relative-box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #ff5722;
  padding: 20px;
}