我希望我的文本在 div 内水平和垂直居中。
我使用 inset 属性用我的 p 标签填充整个 div。
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<div class="wrapper">
<div class="zone">
<p>Hello World</p>
</div>
</div>
</body>
</html>
CSS：
* {
margin: 0;
padding: 0;
box-sizing: bordered-box;
}
.wrapper {
background: red;
}
.zone {
min-height:10em;
text-align: center;
position: relative;
}
.zone p {
position: absolute;
inset:0;
}
但是我无法让它工作。谁能给我一个关于如何使用 inset 属性实现此目的的提示？
如果您需要使用 inset 属性，您可以执行以下操作，但是还有许多更好的方法可以将文本置于 div 中。
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.wrapper {
background: red;
}
.zone {
min-height: 10em;
text-align: center;
position: relative;
}
.zone p {
font-size: 20px;
position: absolute;
inset: calc(50% - 10px) 0 0 0; /* The minus value needs to be half the font-size */
}<!doctype html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<div class="wrapper">
<div class="zone">
<p>Hello World</p>
</div>
</div>
</body>
</html>