如何实现一个素垂直水平居中
确定问题背景
题目中只说实现一个素垂直水平居中，但是问题来了
此素的宽高是已知还是未知？
此素相对于谁居中？
- 相对于浏览器窗口
- 相对于其父素垂直水平居中
以上情况不同，所能给出的方案也不同，下面依次进行介绍
此素宽高已知
相对于浏览器窗口居中
相对于浏览器居中的情况下又有两种情况，一种是首屏居中，使用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
