css上下居中

在CSS布局中，实现元素的上下居中是一个常见的需求。最简单的解决方案是使用Flexbox布局，通过设置父容器的display: flex;和align-items: center;即可轻松实现子元素的垂直居中。

下面将几种实现CSS上下居中的方法，并提供相应的代码示例。

方法一：Flexbox布局

Flexbox是一种强大的布局模式，能够轻松实现水平和垂直方向上的对齐。以下是具体代码：

css
.parent {
  display: flex;
  align-items: center; /* 垂直居中 <em>/
  justify-content: center; /</em> 水平居中（可选） <em>/
  height: 300px; /</em> 父容器高度 */
}</p>

<p>.child {
  width: 100px;
  height: 100px;
  background-color: lightblue;
}

html</p>

<div class="parent">
  <div class="child"></div>
</div>

<p>

这种方法适用于现代浏览器，简单且易于维护。

方法二：表格布局

利用CSS的表格属性也可以实现上下居中。这种方式兼容性较好，尤其适合需要支持旧版浏览器的场景。

css
.parent {
  display: table;
  height: 300px; /* 父容器高度 */
  width: 100%;
}</p>

<p>.child {
  display: table-cell;
  vertical-align: middle; /* 垂直居中 <em>/
  text-align: center; /</em> 水平居中（可选） */
  background-color: lightcoral;
}

html</p>

<div class="parent">
  <div class="child">居中内容</div>
</div>

<p>

方法三：定位与transform

通过定位结合CSS的transform属性，可以精确地将子元素放置在父容器的中心位置。

css
.parent {
  position: relative;
  height: 300px; /* 父容器高度 */
  border: 1px solid black;
}</p>

<p>.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 调整到中心 */
  width: 100px;
  height: 100px;
  background-color: lightgreen;
}

html</p>

<div class="parent">
  <div class="child"></div>
</div>

<p>

方法四：行内块元素

对于单行文本或较小的元素，可以使用行内块元素的方式实现垂直居中。

css
.parent {
  height: 300px; /* 父容器高度 <em>/
  line-height: 300px; /</em> 设置行高等于容器高度 <em>/
  text-align: center; /</em> 水平居中 */
  border: 1px solid black;
}</p>

<p>.child {
  display: inline-block;
  vertical-align: middle;
  line-height: normal; /* 恢复正常的行高 */
  background-color: lightskyblue;
  padding: 10px;
}

html</p>

<div class="parent">
  <span class="child">居中内容</span>
</div>

<p>

以上四种方法各有优劣，选择时需根据实际项目需求和目标浏览器的支持情况来决定。