>>
知识广场
transform:translate(-50%,-50%)实现水平或垂直居中效果
导读:
<style>
* {
margin: 0;
padding: 0;
}
.center {
width: 960px;
height: 50…
<style>
* {
margin: 0;
padding: 0;
}
.center {
width: 960px;
height: 500px;
margin: 0 auto;
background: #1879d9;
}
.center p {
background: #fff;
position: relative;
top: 50%;
left: 0;
right: 0;
margin: 0 auto;
width: 100px;
/* 让div 沿Y轴平移自身高度的一半 */
transform: translateY(-50%);
}
</style>
<div class="center">
<p>居中处理的文字</p>
</div>
代码效果:
相关推荐
- 阅读榜
- 1. U.FL座 IPEX/IPX接头1代,2代,3代,4代,5代区分对照图
- 2. 个人所得税申报系统(扣缴端)如何删除已离职人员信息
- 3. 概率统计学中95%置信区间的系数1.96怎么得到的?
- 4. linux主机ssh命令来查看某一端口是否开放
- 5. 记录一个非常实用的前端拖拽插件interact.js(JS前端开发)
- 6. ipex1代与4代差别
- 7. PHP全局变量如何在函数体里面使用方法总结
- 8. 离职员工申报个税删不掉 显示存在收入明细,若该人员已离职或退休,请将人员状态改为非正常。可改为非正常后还是不行
- 9. 常用浏览器User-Agent大全(总结)
- 10. 总结14款前端常用的富文本编辑器插件