html设置body内容竖直方向居中
时间: 2023-11-08 18:05:02 浏览: 79
html中对文本实现垂直居中的方法
可以使用flex布局将body元素的内容垂直居中。
以下是示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>垂直居中</title>
<style>
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
}
</style>
</head>
<body>
<p>这是居中的内容</p>
</body>
</html>
```
在上面的代码中,我们将body元素设置为flex布局,并使用`align-items: center;`和`justify-content: center;`将其内容垂直和水平居中。`height: 100vh;`设置body元素的高度为视口高度,这将确保在任何设备上都能正确地垂直居中内容。`margin: 0;`用于去除默认的外边距。
阅读全文