一、水平居中

1. 内联元素

  1. <div class="container">
  2. <span class="content">水平居中</span>
  3. </div>

(1)text-align

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

  1. .container {
  2. text-align: center;
  3. }

2. 块级元素

  1. <div class="container">
  2. <div class="content">水平居中</div>
  3. </div>

(1)margin

如果块元素的高度和宽度已知,就可以通过将元素的左右margin值设置为auto将元素水平居中:

  1. .content {
  2. width: 100px;
  3. height: 100px;
  4. margin-left: auto;
  5. margin-right: auto;
  6. }

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

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

3. 通用

(1)Flex 布局

在 Flex 布局中,justify-content可以用于设置弹性盒子元素在主轴方向上的对齐方式。当其属性值为 center 时,其子元素整体会在主轴的中心位置。

  1. .container {
  2. display: flex;
  3. justify-content: center;
  4. }

如果弹性盒子的主轴是垂直方向,可以使用align-items来代替justify-content以实现元素的水平居中:

  1. .container {
  2. display: flex;
  3. flex-direction: column
  4. align-items: center;
  5. }

(2)Grid 布局

在 Grid 布局中,justify-content 属性会沿着行轴线(水平方向) 在网格容器中对齐网格。当属性值为center时,就可以将网格对齐到网格容器的水平居中位置。

  1. .container {
  2. display: grid;
  3. justify-content: center;
  4. }

(3)绝对定位

可以通过将使用绝对定位和变换实现元素的水平居中:

  1. .container {
  2. position: relative;
  3. }
  4. .content {
  5. position: absolute;
  6. left: 50%;
  7. transform: translateX(-50%);
  8. }

如果块元素的宽度已知,也可以使用负边距来代替transform

  1. .container {
  2. position: relative;
  3. }
  4. .content {
  5. width: 100px;
  6. position: absolute;
  7. left: 50%;
  8. margin-left: -50px;
  9. }

二、垂直居中

1. 块级元素

  1. <div class="container">
  2. <div class="content">垂直居中</div>
  3. </div>

(1)绝对定位

可以通过将使用绝对定位和变换实现元素的垂直居中:

  1. .container {
  2. position: relative;
  3. }
  4. .content {
  5. position: absolute;
  6. top: 50%;
  7. transform: translateY(-50%);
  8. }

如果块元素的高度已知,也可以使用负边距来代替transform

  1. .container {
  2. position: relative;
  3. }
  4. .content {
  5. height: 100px;
  6. position: absolute;
  7. top: 50%;
  8. margin-top: -50px;
  9. }

2. 通用

(1)Flex 布局

在 Flex 布局中,align-items 属性用来定义flex子项在flex容器的当前行的侧轴(纵轴)方向上的对齐方式。当其属性值为 center 时,元素位于容器的中心。

  1. .container {
  2. display: flex;
  3. align-items: center;
  4. }

如果将Flex 的主轴切换为垂直方向,则需要使用justify-content来代替align-items以实现元素的垂直居中:

  1. .flex {
  2. display: flex;
  3. flex-direction: column;
  4. justify-content: center;
  5. }

(2)Grid 布局

使用 CSS Grid 布局中,可以使用 align-content 属性将项目垂直居中到其网格区域。

  1. .container {
  2. display: grid;
  3. align-content: center;
  4. }

如果将网格的排列方向更改为水平,垂直居中依旧是生效的:

  1. .container {
  2. display: flex;
  3. align-content: center;
  4. grid-auto-flow: column;
  5. }

三、水平垂直居中

  1. <div class="container">
  2. <div class="content">水平垂直居中</div>
  3. </div>

(1)绝对定位

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

  1. .container {
  2. position: relative;
  3. }
  4. .content {
  5. position: absolute;
  6. top: 50%;
  7. left: 50%;
  8. transform: translate(-50%, -50%);
  9. }

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

  1. .container {
  2. position: relative;
  3. }
  4. .content {
  5. width: 100px;
  6. height: 100px;
  7. position: absolute;
  8. top: 50%;
  9. left: 50%;
  10. margin-top: -50px;
  11. margin-left: -50px;
  12. }

(2)Flex 布局

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

  1. .container {
  2. display: flex;
  3. justify-content: center;
  4. align-items: center;
  5. }

(3)Grid 布局

在 Grid 布局中,可以使用以下形式来实现元素的水平垂直居中:

  1. .container {
  2. display: grid;
  3. place-items: center;
  4. }

place-content 属性是align-contentjustify-content的简写,当该属性的值为center时,所有的子元素堆叠在父元素的中间对齐。