transform: translateY(-50%)实现垂直居中效果

举报
彭世瑜 发表于 2021/08/13 22:54:04 2021/08/13
1.2k+ 0 0
【摘要】 <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>

  
 

实现效果
在这里插入图片描述

参考
水平居中和transform: translateY(-50%) 实现元素垂直居中效果

文章来源: pengshiyu.blog.csdn.net,作者:彭世瑜,版权归原作者所有,如需转载,请联系作者。

原文链接:pengshiyu.blog.csdn.net/article/details/107782023

【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

作者其他文章

评论(0

抱歉,系统识别当前为高风险访问,暂不支持该操作

    全部回复

    上滑加载中

    设置昵称

    在此一键设置昵称,即可参与社区互动!

    *长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

    *长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。