1.文本垂直居中
1.1 Flexbox 布局
<!DOCTYPE html>
<html lang="en">
<head><style>.container {display: flex;align-items: center; /* 使用 align-items 属性垂直居中 */height: 200px; /* 设置容器高度 */border: 1px solid #ccc;}</style>
</head>
<body><div class="container"><p>垂直居中文本</p>
</div></body>
</html>
1.2Grid 布局：
<!DOCTYPE html>
<html lang="en">
<head><style>.container {display: grid;place-items: center; /* 使用 place-items 属性垂直水平居中 */height: 200px; /* 设置容器高度 */border: 1px solid #ccc;}</style>
</head>
<body><div class="container"><p>垂直居中文本</p>
</div></body>
</html>
2. 左侧border与文字作为导航标题
<div class="header_all"><div class="header_content" > <p>{{fatherName}}</p></div></div>
<style lang="less" scoped>
.header_all{width: 100%;height: 100%;margin: 0.5% 0 0 1%;
}
.header_content{height: 80%;max-height: 50px;display: flex;align-items: center;border-left: 10px solid red;
}
p{font-size:16px;color: black;font-weight: 500;
}
</style>
