怎么让html中的文字在整个界面中水平垂直居中
时间: 2024-01-22 12:18:29 浏览: 32
可以使用CSS中的flex布局来实现文字在整个界面中水平垂直居中。具体的做法是,在父元素上添加`display:flex`和`justify-content:center;align-items:center;`属性,来让子元素在水平和垂直方向上居中。以下是示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>居中</title>
<style>
body{
margin:0;
padding:0;
}
.container{
display:flex;
justify-content:center;
align-items:center;
height:100vh;
}
.text{
font-size:50px;
font-weight:bold;
}
</style>
</head>
<body>
<div class="container">
<p class="text">这是一段居中的文字</p>
</div>
</body>
</html>
```
在上面的代码中,我们将页面的高度设置为100vh,然后将容器元素 `.container` 设置为flex布局,并添加了 `justify-content:center` 和 `align-items:center` 属性,让子元素在水平和垂直方向上都居中。最后,我们添加了一个 `.text` 类,来设置文字的样式。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![7z](https://img-home.csdnimg.cn/images/20210720083312.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![7z](https://img-home.csdnimg.cn/images/20210720083312.png)
![7z](https://img-home.csdnimg.cn/images/20210720083312.png)