html上下居中

 

在HTML中实现上下居中有多种方法，下面是其中几种常见的方法：

 

方法一：使用Flexbox布局

首先，在HTML中创建一个父容器并设置其display为flex，然后添加一个内部的子元素。

```html

```

然后，在CSS中添加如下样式：

```css

.container {

display: flex;

align-items: center; /* 垂直居中 */

justify-content: center; /* 水平居中 */

height: 100vh; /* 设置父容器的高度占满整个视口 */

}

 

.box {

width: 300px;

height: 300px;

background-color: gray;

}

```

这样就可以实现父容器中的子元素在垂直和水平方向上居中。

 

方法二：使用*定位和负margin

首先，在HTML中创建一个父容器和一个内部的子元素。

```html

```

然后，在CSS中添加如下样式：

```css

.container {

position: relative;

height: 100vh; /* 设置父容器的高度占满整个视口 */

}

 

.box {

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%

-50%); /* 将子元素向上向左偏移自身宽高的一半，实现居中效果 */

width: 300px;

height: 300px;

background-color: gray;

}

```

这样就可以实现父容器中的子元素在垂直和水平方向上居中。

 

方法三：使用表格布局

首先，在HTML中创建一个表格结构，并添加一个表格单元格。

```html

内容

```

然后，在CSS中添加如下样式：

```css

.table {

display: table;

width: *;

height: 100vh; /* 设置表格的高度占满整个视口 */

text-align: center; /* 水平居中 */

}

 

.box {

display: inline-block;

width: 300px;

height: 300px;

vertical-align: middle; /* 垂直居中 */

background-color: gray;

}

```

这样就可以实现表格中的单元格内容在垂直和水平方向上居中。

 

以上就是一些常见的在HTML中实现上下居中的方法。希望对你有帮助！