* {margin: 0;}
div {
background-color:#bad455;
width: 200px;
height: 200px;
top:50%;
left:50%;
position:fixed;
transform: translate(-50%, -50%);
text-align:center;
}
div:hover {
box-shadow: 3px 5px 50px 5px;
display:inline-block;
border-radius:10%;
transform:skewX(50deg);
}
div p {
top:50%;
position:relative;
}
<div>
<p>oooo</p>
</div>
当我这么做的时候top:50%
并设置position:relative
,我原以为这段文字会出现在中间。但现在我发现它并不完全在中间。如果有人能解释我将不胜感激!
最佳答案
使用transform:translateY(-50%);
将其正确居中
* {
margin: 0;
}
div {
background-color: #bad455;
width: 200px;
height: 200px;
top: 50%;
left: 50%;
position: fixed;
transform: translate(-50%, -50%);
text-align: center;
}
div:hover {
box-shadow: 3px 5px 50px 5px;
display: inline-block;
border-radius: 10%;
transform: skewX(50deg);
}
div p {
top: 50%;
transform: translateY(-50%);
position: relative;
}
<div>
<p>oooo</p>
</div>
关于css - 文本未在 div 中居中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51059367/