跳到主要内容

居中

水平居中​

1.子元素行内元素​

<div class="container">
  <span class="content">水平居中</span>
</div>
  • text-align

text-align 一般运用在块级元素中，使其中的文本对齐。实际上，运用在块级元素中的 text-align 会使其包含的内联元素水平对齐

.container {
  text-align: center;
}

2.子元素块级元素​

<div class="container">
  <div class="content">水平居中</div>
</div>
  • margin 如果块元素的高度和宽度已知，就可以通过将元素的左右 margin 值设置为 auto 将元素水平居中：
.content {
  width: 100px;
  height: 100px;
  margin-left: auto;
  margin-right: auto;
}

如果有多个块元素，需要将多个元素包裹在一个元素中以使用该方法实现水平居中：

<div class="container">
  <div class="box">
    <div class="content">水平居中</div>
    <div class="content">水平居中</div>
  </div>
</div>
.box {
  display: flex;
  margin-left: auto;
  margin-right: auto;
}

水平垂直居中​

<div class="container">
  <div class="content">水平垂直居中</div>
</div>

绝对定位​

使元素垂直居中最通用的方法就是使用绝对定位和 transform：

.container {
  position: relative;
}

.content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

如果元素的高度和宽度已知，也可以使用 margin 来代替 transform:

.container {
  position: relative;
}

.content {
  width: 100px;
  height: 100px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -50px;
  margin-left: -50px;
}

Flex 布局​

在使用 Flex 布局时，可以结合上面的水平和垂直居中来实现水平垂直居中：

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

Grid 布局​

.container {
  display: grid;
  place-items: center;
}

place-content 属性是 align-content 和 justify-content 的简写，

当该属性的值为 center 时，所有的子元素堆叠在父元素的中间对齐。