写一个html页面垂直分布的代码
时间: 2023-03-20 15:01:49 浏览: 136
可以使用CSS的flexbox布局实现HTML页面的垂直分布。以下是一个简单的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<style>
html, body {
height: 100%;
margin: 0;
}
.container {
display: flex;
flex-direction: column;
height: 100%;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<div class="container">
<h1>这是标题</h1>
<p>这是一些内容</p>
</div>
</body>
</html>
```
在这个例子中,我们首先使用`html`和`body`元素的`height`属性设置页面的高度为100%。然后,我们创建了一个名为`.container`的div元素,并将其高度也设置为100%。接着,我们使用CSS的`flexbox`布局,设置`.container`元素的`display`属性为`flex`,`flex-direction`属性为`column`(表示垂直方向排列),`justify-content`属性为`center`(表示在垂直方向上居中对齐),以及`align-items`属性为`center`(表示在水平方向上居中对齐)。
最后,在`.container`元素中添加了一些内容(一个标题和一些文本),这些内容将在垂直方向上居中对齐。