css 垂直居中 无固定高度_div垂直居中的方法

css 垂直居中 无固定高度_div垂直居中的方法

如何实现一个素垂直水平居中

确定问题背景

题目中只说实现一个素垂直水平居中,但是问题来了

此素的宽高是已知还是未知?

此素相对于谁居中?

  • 相对于浏览器窗口
  • 相对于其父素垂直水平居中

以上情况不同,所能给出的方案也不同,下面依次进行介绍

此素宽高已知

相对于浏览器窗口居中

相对于浏览器居中的情况下又有两种情况,一种是首屏居中,使用absolute即可 另一种是一直固定在窗口居中,使用fixed即可。

首屏居中

若是只要求在首屏垂直居中,使用absolute

<head> <style> body,p{ 
  margin: 0; padding: 0;} div{ 
   width: 500px; height: 500px; background: pink; position: absolute; margin: auto; right: 0; left: 0; top: 0; bottom: 0; } p{ 
   width: 300px; height: 300px; background: yellow; position: absolute; top: 100px; right: 100px; } </style> </head> <body> <div> <p>首屏居中</p> </div> </body>

2024最新激活全家桶教程,稳定运行到2099年,请移步至置顶文章:https://sigusoft.com/99576.html

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。 文章由激活谷谷主-小谷整理,转载请注明出处:https://sigusoft.com/161578.html

(0)
上一篇 2024年 7月 5日
下一篇 2024年 7月 5日

相关推荐

关注微信