transform: translateY(-50%)实现垂直居中效果
【摘要】 <style>
* { margin: 0; padding: 0;
} .center { width: 960px; height: 500px; margin: 0 auto; background: #1879d9;
} .center p { background: #fff; position: relative; top: 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>
实现效果
文章来源: pengshiyu.blog.csdn.net,作者:彭世瑜,版权归原作者所有,如需转载,请联系作者。
原文链接:pengshiyu.blog.csdn.net/article/details/107782023
【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱:
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
作者其他文章
评论(0)