css文字水平居中垂直居中显示
时间: 2023-06-21 19:13:24 浏览: 134
css水平垂直居中
可以使用 CSS 的 flexbox 属性实现文字水平居中垂直居中显示,具体实现方法如下:
HTML 代码:
```html
<div class="container">
<p class="text">Hello, World!</p>
</div>
```
CSS 代码:
```css
.container {
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
height: 100vh; /* 设置容器高度为视窗高度 */
}
.text {
font-size: 24px;
}
```
其中,`display: flex;` 将容器设置为 flex 布局,`justify-content: center;` 水平居中,`align-items: center;` 垂直居中,`height: 100vh;` 设置容器高度为视窗高度。注意,这里的 `p` 元素需要设置一个合适的字体大小,以达到最佳效果。
阅读全文