[分享]css内容上下左右居中

在网页布局中，让元素居中是很常见的需求，其中包括内容、图像、表格等等。让元素上下左右居中可以使用 CSS 来实现。// 水平居中 { display: flex; justifycontent: ce...

在网页布局中，让元素居中是很常见的需求，其中包括内容、图像、表格等等。让元素上下左右居中可以使用 CSS 来实现。

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

// 垂直居中
{
  display: flex;
  align-items: center;
}

// 上下左右居中
{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
} 

以上就是实现上下左右居中的三种方法，分别是 flex 布局、绝对定位和 transform 变换。

而如果要让一个内容块对齐文本行，可以使用 vertical-align 属性。

// 对齐顶部
{
  vertical-align: top;
}

// 对齐中线
{
  vertical-align: middle;
}

// 对齐底部
{
  vertical-align: bottom;
} 

以上就是让内容块对齐文本行的三种方式。

总结起来，居中是在网页布局中必不可少的一项功能，我们可以通过多种方式来实现这一目标，如 flex 布局、绝对定位、 transform 变换以及 vertical-align 属性等等。