css - 文本不在 div 中居中
问题描述
* {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>
推荐阅读
- java - 为什么这个冒泡排序不能通过使用简单的静态整数数组来工作?
- dart - 如何在颤动中制作圆形的相机预览
- javascript - 在地图上的正确位置制作贝塞尔曲线控制点
- python - 如何在循环中保存 PIL 图像
- python-3.x - 如何自动创建变量并从文件中的一行分配值
- html - 由于引导程序,CSS样式没有出现?
- android - Ionic 4 Google 登录方法返回错误 12500
- c# - 将 LINQ 与 Select 和 Distinct 方法一起使用
- angular - 角度 7 中的 Http POST 请求后响应为空
- excel - 使用宏创建数据透视表时出错