垂直居中

1. 使用 padding

CSS 中有很多方式可以实现垂直居中对齐。一个简单的方式就是头部顶部使用 padding:

. parent {
    padding: 70px 0;
    border: 3px solid green;
}

2. 使用 flexbox

使用 flexbox 布局是实现垂直居中最常用的方法之一。在父容器上设置 display: flex 和 align-items: center，可以将子元素在垂直方向上居中。

.parent {
  display: flex;
  align-items: center; /* 在垂直方向上居中 */
}

或者

.parent { 
  display: flex;
}
. child {
   align-self: center;
}

或者

.parent { 
  display: flex;
}
. child {
   margin: auto 0;
}

显示效果是在同一行, 即使子元素是块级(block)元素,

3. 使用 table-cell

使用 table-cell 布局也是一种常见的垂直居中方法。在父容器上设置 display: table-cell、vertical-align: middle 和一个固定的高度，可以使子元素在垂直方向上居中。

.parent {
  display: table-cell;
  vertical-align: middle; /* 在垂直方向上居中 */
  height: 200px; /* 固定高度 */
}

4. 使用 line-height

使用 line-height 属性也可以实现垂直居中。将父元素的line-height 值设置为和父元素高度相等的值，然后将子元素的 display 属性设置为 inline-block，就可以使子元素在垂直方向上居中。对于单行文字/行内元素/行内块级元素都是适用的

.parent {
  height: 200px; /* 父元素高度 */
  line-height: 200px; /* 父元素高度 */
}
.child {
  display: inline-block;
  vertical-align: middle; /* 在垂直方向上居中 */
}

5. transform

使用 transform 也可以实现垂直居中。将子元素的 position 属性设置为 absolute，然后将top 和 left 属性设置为 50%，最后使用 translate 函数将子元素向上和左移动自身高度和宽度的一半，就可以实现垂直居中。具体代码如下：

.parent {
  position: relative; /* 父元素设置为相对定位 */
}
.child {
  position: absolute; /* 子元素设置为绝对定位 */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 将子元素向上和左移动自身高度和宽度的一半 */
}

在使用 transform 实现垂直居中时，需要将父元素的position 属性设置为relative或 absolute，否则子元素无法正确定位。

水平居中

1. text-align

使用text-align 属性可以将文本或行内元素水平居中。将父元素的 text-align 属性设置为center，就可以实现其内部文本或行内元素水平居中。

.parent {
  text-align: center; /* 水平居中 */
}

2. margin

使用 margin 属性可以将块级元素水平居中。将元素的左右 margin 值设置为auto，就可以将元素水平居中。

.element {
  margin: 0 auto; /* 水平居中 */
}

3. flexbox

使用flexbox 布局也可以实现元素水平居中。将父元素的 display 属性设置为flex，再将 justify-content属性设置为 center，就可以将子元素水平居中

.parent {
  display: flex;
  justify-content: center; /* 水平居中 */
}

4. grid

使用grid 布局也可以实现元素水平居中。将父元素的display 属性设置为grid，再将 justify-content 属性设置为 center，就可以将子元素水平居中

.parent {
  display: grid;
  justify-content: center; /* 水平居中 */
}

中心位置

1. 使用padding和text-align

如果要水平和垂直都居中，可以使用 padding 和 text-align: center:

. parent {
    padding: 70px 0; /* 垂直居中 */
    border: 3px solid green;
    text-align: center; /* 水平居中 */
}

2. flexbox

将父元素的 display 属性设置为flex，再将 justify-content 和 align-items 属性都设置为 center，即可将子元素水平和垂直居中。

.parent {
  display: flex;
  justify-content: center;  /* 水平居中 */
  align-items: center;  /* 在垂直方向上居中 */
}

或者:

.parent {
  display: flex;
  place-items: center;
}

place-items是同时设置align-items和justify-items的快捷方式,
通过设置 center , 其实是设置align-items:center; justify-items:center

3. 使用绝对定位和 transform 属性

将元素的 position 属性设置为 absolute，再将 top 和left 属性设置为 50%，再使用transform 属性的 translate() 方法将元素向上和向左移动自身宽度和高度的一半即可实现垂直和水平居中。

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

4. 使用 text-align 和 line-height

将父元素的 text-align 属性设置为 center，然后将父元素的 line-height 属性设置为和其高度相同的值，即可将内部文本或行内元素水平和垂直居中

.parent {
  text-align: center;
  line-height: 100px; /* 与元素高度相同的值 */
}

5. transform 和 flexbox

将父元素的 display 属性设置为 flex，再将 justify-content 和 align-items 属性都设置为 center，然后使用transform 属性的translate()方法将子元素向上和向左移动自身宽度和高度的一半即可实现垂直和水平居中

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

.child {
  transform: translate(-50%, -50%);
}

5. table 和 table-cell

将父元素的display 属性设置为 table，再将子元素的 display 属性设置为table-cell，然后将子元素的 vertical-align 属性和 text-align 属性都设置为 middle，即可将子元素水平和垂直居中。

.parent {
  display: table;
}

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

6. grid

将父元素的 display 属性设置为 grid，再将 justify-items 和align-items属性都设置为 center，即可将子元素水平和垂直居中。

.parent {
  display: grid;
  justify-items: center;
  align-items: center;
}

更多布局可以查看: 常见布局实现

CSS中实现垂直居中, 水平居中方式