css 动态高度 内容垂直
时间: 2023-08-19 13:08:51 浏览: 47
要实现CSS动态高度和内容垂直对齐,你可以使用flex布局或者表格布局。以下是两种方法的示例:
1. 使用flex布局:
```html
<div class="container">
<div class="content">
<!-- 内容 -->
</div>
</div>
```
```css
.container {
display: flex;
align-items: center; /* 垂直居中对齐 */
justify-content: center; /* 水平居中对齐 */
height: 100vh; /* 设置容器高度为视口高度 */
}
.content {
max-width: 100%; /* 内容宽度不超过容器宽度 */
}
```
2. 使用表格布局:
```html
<table class="container">
<tr>
<td class="content">
<!-- 内容 -->
</td>
</tr>
</table>
```
```css
.container {
height: 100vh; /* 设置容器高度为视口高度 */
display: table;
width: 100%;
}
.content {
display: table-cell;
vertical-align: middle; /* 垂直居中对齐 */
text-align: center; /* 水平居中对齐 */
}
```
这些方法都可以使内容在垂直方向上动态适应容器的高度,并且垂直居中对齐。你可以根据自己的需求选择其中一种方法进行使用。