如何实现一个元素垂直水平居中
确定问题背景
题目中只说实现一个元素垂直水平居中，但是问题来了
此元素的宽高是已知还是未知？
此元素相对于谁居中？
- 相对于浏览器窗口
- 相对于其父元素垂直水平居中
以上情况不同，所能给出的方案也不同，下面依次进行介绍
此元素宽高已知
相对于浏览器窗口居中
相对于浏览器居中的情况下又有两种情况，一种是首屏居中，使用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>讯享网
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请联系我们，一经查实，本站将立刻删除。
如需转载请保留出处：https://51itzy.com/kjqy/30401.html