居中 CSS 元素 - CSS

概述

在网页设计中，经常需要对页面中的元素进行居中排布。CSS 提供了多种实现元素居中的方式，可以根据具体需求选择适合的方式使用。

居中方式

水平居中

文字居中

可以通过设置 text-align: center; 属性实现文字水平居中，例如：

.text-center {
  text-align: center;
}

行块级元素居中

如果想要将行块元素（例如 div、span 等）水平居中，可以通过设置 margin 属性实现。将左右 margin 值都设为 auto，会使该元素水平居中。例如：

.block-center {
  margin: 0 auto;
}

行内块级元素居中

对于行内块元素，可以将该元素所在的父元素设置为 text-align: center;，即可实现元素水平居中。例如：

.parent {
  text-align: center;
}

.inline-block {
  display: inline-block;
}

垂直居中

行内元素垂直居中

对于行内元素，可以通过设置 line-height 属性实现垂直居中。将 line-height 属性值设置为父元素高度的值即可使子元素垂直居中。例如：

.parent {
  height: 100px;
  line-height: 100px;
}

.inline {
  display: inline;
}

行块级元素垂直居中

对于行块元素，可以通过设置 display: table-cell; 和 vertical-align: middle; 属性实现垂直居中。例如：

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

.block {
  display: block;
}

水平垂直居中

绝对定位实现垂直水平居中

通过设置元素的 position: absolute;，再通过 top，bottom，left，right 属性的组合将元素居中。例如：

.parent {
  position: relative;
  height: 100px;
}

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

弹性布局实现垂直水平居中

通过设置采用弹性布局，可以将元素垂直水平居中。例如：

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

.child {
  width: 100px;
  height: 100px;
}

结束语

以上是 CSS 实现居中的几种方法，可以根据具体需求选择适合的方式使用。