文字在div中垂直居中
时间: 2024-05-07 22:20:03 浏览: 92
div垂直居中
可以使用CSS中的flex布局来实现文字在div中垂直居中。
具体做法如下:
1. 首先在父元素上设置display: flex和align-items: center属性,这样子元素就能够垂直居中了。
2. 然后在子元素上设置margin: auto,这样子元素就能够水平居中了。
示例代码如下:
HTML代码:
```
<div class="container">
<p>这里是文字</p>
</div>
```
CSS代码:
```
.container {
display: flex;
align-items: center;
height: 200px; /*设置div高度,方便查看效果*/
border: 1px solid #ccc; /*设置边框,方便查看效果*/
}
p {
margin: auto;
}
```
这样设置之后,文字就能够在div中垂直居中了。
阅读全文