display:flex实现内容水平垂直居中展示
需要增加下面两点就能实现
首先父级元素必须有高度，没有高度就无法垂直居中，如果想全屏垂直居中，可以设置高度为100vh
比如body设置为这样
代码语言：javascript复制 body{
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}里面的子元素就会垂直水平居中显示
源码：
代码语言：javascript复制<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>独立私有化智能在线客服系统</title>
</head>
<body>
<style>
body{
background: rgb(242,243,247);
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.sub,.main,.admin{
letter-spacing: 18px;
font-family: fangsong;
font-size: 38px;
writing-mode: vertical-rl;
}
.main{
font-size: 60px;
margin: 0px 20px;
}
.admin{
display: block;
text-decoration: none;
color: red;
border: 2px solid red;
padding: 10px 0px 2px 0px;
border-radius: 12px;
margin-top: 150px;
font-size: 20px;
letter-spacing: 5px;
}
.admin:hover{
color: red;
}
.sub span{
font-size: 50px;
}
</style>
<a href="/login" target="_blank" class="admin">在线客服</a>
<h1 class="main">
各路相知
</h1>
<div class="sub">互聊片刻，<span>结交</span></div>
</body>
</html>效果：
