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 向左上方移动自身宽高的一半，从而实现水平垂直居中。

相关问题

css文本自适应水平垂直居中

要实现文本的自适应水平垂直居中，可以使用CSS的flex布局和伪元素。具体步骤如下：

1. 将要居中的文本包裹在一个div容器中，并将该容器设置为display:flex;以启用flex布局。

2. 设置该容器的justify-content和align-items属性为center，使其在水平和垂直方向上居中对齐。

3. 在该容器内部添加一个伪元素:before，并将其设置为content:""; display:inline-block; height:100%; vertical-align:middle;。该伪元素的作用是将其放置在容器内部的中间位置，从而使文本相对于该伪元素进行垂直居中对齐。

4. 最后，在伪元素:before中添加文本，并设置其text-align:center;以实现文本的水平居中。

以下是示例代码：

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

.center:before {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

.center span {
  position: relative;
  z-index: 1;
  text-align: center;
}

在HTML中，可以使用以下代码来应用这些样式：

<div class="center">
  <span>要居中的文本</span>
</div>

如何让div自适应居中

您可以使用以下CSS属性和值来让div自适应居中：

1. 设置div的宽度为固定值或百分比，例如width: 50%;

2. 设置div的左右边距为auto，例如margin: 0 auto;

3. 将div的display属性设置为block，例如display: block;

4. 将div的text-align属性设置为center，例如text-align: center;

实现代码示例：

div {
  width: 50%;
  margin: 0 auto;
  display: block;
  text-align: center;
}