css有宽高的情况下，div在页面水平垂直居中

有多种方法可以实现在页面中水平垂直居中一个元素，其中一种常见的方法是使用 CSS 的 flexbox 布局。以下是一个简单的示例代码：

HTML:

<div class="container">
  <div class="centered">
    居中的内容
  </div>
</div>

CSS:

.container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  height: 100vh; /* 设置容器高度为视口高度，实现垂直居中 */
}

.centered {
  width: 200px;
  height: 100px;
  background-color: #ddd;
}

在上面的示例中，`.container` 元素使用了 flexbox 布局，并设置了 `justify-content: center` 和 `align-items: center`，实现了水平和垂直居中。同时，`.container` 的高度设置为视口高度 `height: 100vh`，使得其中的元素垂直居中。`.centered` 元素是需要居中的元素，它设置了宽度和高度，并添加了背景色，以便展示效果。

相关问题

css 如何让div自适应屏幕水平垂直居中

可以使用以下 CSS 属性和值来让 div 自适应屏幕并水平垂直居中：

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

这里使用了 `position: absolute` 将 div 从文档流中脱离，然后使用 `top: 50%` 和 `left: 50%` 让 div 的左上角定位在页面的中心位置。接着使用 `transform: translate(-50%, -50%)` 将 div 向左上方移动自身宽高的一半，从而实现水平垂直居中。

实现div在页面中垂直水平居中

要实现在页面中垂直水平居中的div，可以使用以下的CSS样式：

div {
  position: absolute; /* 绝对定位 */
  top: 50%; /* 父元素顶部距离为50% */
  left: 50%; /* 父元素左侧距离为50% */
  transform: translate(-50%, -50%); /* 平移 */
}

这样就可以将div元素置于页面中央了。需要注意的是，这种方法需要将父元素设置为相对定位或绝对定位，否则无法生效。