html中实现上下居中的代码怎么写

在网页设计中，经常需要将元素上下居中，下面介绍几种实现方式：

  
.outer {
  position: relative; /* 父元素需设置相对定位 */
  height: 400px; /* 父元素高度需确定，不能为 auto */
}

.inner {
  position: absolute; /* 子元素设置绝对定位 */
  top: 50%; /* 子元素顶部到父元素顶部的距离是父元素高度的一半 */
  transform: translateY(-50%); /* 将子元素的中心点往上偏移自身高度的一半 */
}
  

上述代码中，我们利用 position 属性实现了父元素和子元素的定位，使子元素可以根据父元素进行相对的定位。同时，我们利用 top 属性以及 transform 属性实现了子元素的上下居中。

除了使用绝对定位的方式，我们还可以使用 table-cell 属性来实现：

  
.container {
  display: table-cell; /* 父元素设置为表格单元格 */
  vertical-align: middle; /* 对齐方式设置为居中 */
  height: 400px; /* 父元素高度需确定，不能为 auto */
}
  

通过将父元素的 display 属性设置为表格单元格，然后设置 vertical-align 属性为居中，我们也可以实现元素的上下居中。这种方式比起绝对定位的方式更为简单，但不太灵活，难以同时处理其他样式。