div 居中的设置方法

首先是CSS设置DIV居中的方法如下

要将 <div> 元素水平和垂直居中，可以使用以下方法：

1. 使用 Flexbox 布局：

〓〓css代码如下：〓〓

.container {

  display: flex;

  justify-content: center;

  align-items: center;

}

在这个示例中，将父容器（例如包含  <div>  的容器）的样式设置为  display: flex;  可以创建一个弹性布局。然后，使用  justify-content: center;  和  align-items: center;  将子元素（即  <div> ）水平和垂直居中。

2. 使用绝对定位和自动边距：

〓〓css代码如下：〓〓

.container {

  position: relative;

}

.element {

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

}

在这个示例中，将父容器的样式设置为  position: relative;  创建一个相对定位的容器。然后，将  <div>  元素的样式设置为  position: absolute; ，并使用  top: 50%; 、 left: 50%;  以及  transform: translate(-50%, -50%);  将其相对于父容器进行水平和垂直偏移，使其居中显示。

这些是将  <div>  元素水平和垂直居中的两种常见方法。你可以根据实际情况选择适合你需求的方法来实现居中效果。

下面是纯HTML实现DIV居中

可以使用以下方法将一个  <div>  元素水平居中，而无需使用CSS：

1. 使用表格布局（table layout）：

〓〓html代码如下：〓〓

<table style="width:100%;height:100%;">

  <tr>

    <td align="center" valign="middle">

      <div>内容</div>

    </td>

  </tr>

</table>

2. 使用Flexbox布局（弹性盒子布局）：

〓〓html代码如下：〓〓

<div style="display: flex; justify-content: center; align-items: center; height: 100vh;">

  <div>内容</div>

</div>

3. 使用表格和CSS属性 text-align: center:

〓〓html代码如下：〓〓

<div style="display: table; width: 100%; height: 100%;">

  <div style="display: table-cell; vertical-align: middle; text-align: center;">

    <div>内容</div>

  </div>

</div>

这些方法可将包含的  <div>  元素在其父元素内水平居中。