html中垂直居中的问题 页面中所有元素都是百分比布局以及定义尺寸，那么单行文本要怎样垂直居中
发布网友
发布时间：2022-04-21 08:27
共1个回答
热心网友
时间：2022-04-21 09:57
.center-block{
width:100px;
height:30px;
line-height:30px;
position:absolute;
top:50%;
left:50%;
transform:translate(-50px,-15px);
}
这个是整个块全屏居中的做法，如果只有一行字的话，只用设置line-height的值等于元素高度
追问注意，高度是百分比定义的，line-height如何确定值追答
没什么影响，懂原理的话都能弄出来
<!DOCTYPE html><head lang="zh-cn">
<meta charset="UTF-8" />
<title>test</title>
<style type="text/css">
.center-block {
width: 30%;
height: 30%;
position: absolute;
top: 50%;
left: 50%;
margin-top: calc(-30%/2);
margin-left: calc(-30%/2);
color: #fff;
text-align: center;
background-color: #333;
}
</style>
</head>
<body>
<div class="center-block">
test text
</div>
</body>
</html>
