vue文字水平垂直居中
时间: 2023-09-30 19:06:33 浏览: 273
vue实现长图垂直居上 vue实现短图垂直居中
你可以使用CSS中的flex布局来实现Vue文字的水平垂直居中。具体方法如下:
HTML代码:
```
<div id="container">
<p id="text">Hello, Vue!</p>
</div>
```
CSS代码:
```
#container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
#text {
text-align: center;
font-size: 24px;
}
```
解释一下,我们先创建一个包含文本的容器div,并设置其高度为100vh,这样就可以让容器充满整个屏幕。然后我们使用flex布局,并将justify-content和align-items都设置为center,这样就可以使文本在容器中水平垂直居中。最后,我们将文本居中对齐,并设置其字体大小为24px。
这样,你就可以在Vue中轻松实现文本的水平垂直居中了。
阅读全文