如何使 div 在屏幕上居中 - Html

在 Web 开发中，使元素居中是一个非常常见的需求。本文将介绍如何使用 HTML 和 CSS 让一个 div 元素在屏幕上水平和垂直居中。

水平居中

方法一：使用 margin 属性

我们可以通过将 left 和 right 的 margin 设置为“auto”，来使一个元素相对于它的容器水平居中。代码如下：

<div class="center-horizontal">这是水平居中的内容</div>

.center-horizontal {
  margin: 0 auto;
}

方法二：使用 flexbox

我们也可以使用 flexbox 来实现水平居中。首先，需要将父元素设置为 flex 容器，然后将子元素设置为 flex 项目，并将 justify-content 属性设置为 center。代码如下：

<div class="center-horizontal">这是水平居中的内容</div>

.center-horizontal {
  display: flex;
  justify-content: center;
}

垂直居中

方法一：使用 display 和 position 属性

我们可以使用 display 和 position 属性组合来实现垂直居中。首先，需要将容器元素设置为 position: relative，并将要居中的元素设置为 position: absolute。然后，将要居中的元素的 top 和 bottom 的值都设置为 0，并将 margin-top 和 margin-bottom 属性设置为“auto”。代码如下：

<div class="center-vertical">这是垂直居中的内容</div>

.center-vertical {
  position: relative;
}
.center-vertical p {
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
}

方法二：使用 flexbox

我们同样可以使用 flexbox 来实现垂直居中。需要将父元素设置为 flex 容器，并将子元素设置为 flex 项目。然后，将 align-items 属性设置为 center，即可实现垂直居中。代码如下：

<div class="center-vertical">这是垂直居中的内容</div>

.center-vertical {
  display: flex;
  align-items: center;
}

水平和垂直居中

接着，我们来看如何同时实现水平和垂直居中。

方法一：使用 display、position 和 transform 属性

我们可以使用 display、position 和 transform 属性组合来实现水平和垂直居中。首先，需要将容器元素和要居中的元素都设置为 position: absolute，并将容器元素的 top、left、bottom 和 right 的值都设置为 0。然后，将要居中的元素的 margin 属性设置为“auto”，并使用 transform 属性来将其水平和垂直居中。代码如下：

<div class="center-both">这是水平和垂直居中的内容</div>

.center-both {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  transform: translate(-50%, -50%);
}

方法二：使用 flexbox

使用 flexbox 实现居中同样简单。首先，将容器元素设置为 flex 容器，并将子元素设置为 flex 项目。然后，将 justify-content 和 align-items 属性都设置为 center 即可。代码如下：

<div class="center-both">这是水平和垂直居中的内容</div>

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

以上就是如何在 HTML 中实现 div 元素在屏幕上居中的方法。无论是要水平居中、垂直居中，还是水平且垂直居中，都可以通过上面的方法实现。