使用CSS實現垂直對齊

一、使用flexbox實現垂直居中

Flexbox是一種能夠輕鬆實現水平和垂直對齊的CSS布局方式。在使用Flexbox布局時，需要定義一個容器，並將內部元素放入容器中。然後，使用CSS屬性將容器和內部元素布局到指定的位置。

下面的示例展示了如何使用Flexbox布局在一個容器中實現垂直居中：

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

二、使用table-cell實現垂直居中

table-cell布局方式是CSS2.1規範中定義的，使用該布局方式可以很容易地實現水平和垂直對齊。使用該方法，需要將被居中的元素設置為display: table-cell，並將其包含在一個包含元素中。然後，在父容器中使用vertical-align屬性將元素居中。

下面的示例展示了如何使用table-cell布局在一個容器中實現垂直居中：

.container {
  display: table;
}
.container .item {
  display: table-cell;
  vertical-align: middle; /* 垂直居中 */
}

三、使用transform實現垂直居中

CSS中的transform屬性可以用來平移、旋轉、縮放或傾斜元素。使用該屬性，可以將元素沿X、Y或Z軸平移，進而實現垂直或水平居中。

下面的示例展示了如何使用transform屬性實現垂直居中：

.container {
  position: relative;
}
.container .item {
  position: absolute;
  top: 50%; /* 定位在父元素的中間 */
  transform: translateY(-50%); /* 向上移動元素的一半高度 */
}

四、使用line-height實現垂直居中

line-height屬性用於設置行框的高度，可以將行框高度值設置為與父元素高度相等的值。在將文本居中時，該值需要設置為與外部容器的高度相等。

下面的示例展示了如何使用line-height屬性實現垂直居中：

.container {
  height: 300px;
  line-height: 300px; /* 與外部容器的高度相等 */
  text-align: center;
}

五、使用grid實現垂直居中

grid布局是CSS3規範中定義的，該布局方式提供了一種更靈活的方法來布局網格元素。使用grid布局，可以很容易地實現垂直和水平對齊，而不需要將元素包含在容器中。

下面的示例展示了如何使用grid布局實現垂直居中：

.container {
  display: grid;
  place-items: center; /* 水平和垂直居中 */
}

六、案例演示：CSS實現垂直居中

下面是一個使用CSS實現垂直居中的案例演示：

.container {
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.container .item {
  width: 200px;
  height: 100px;
  background-color: #00adb5;
  color: #fff;
  text-align: center;
  line-height: 100px;
}

垂直居中