首页 > web前端 > css教程 > 如何使固定位置元素水平和垂直居中?

如何使固定位置元素水平和垂直居中?

DDD
发布: 2024-12-17 22:43:17
原创
674 人浏览过

How to Horizontally and Vertically Center a Fixed-Position Element?

如何将位置:固定元素居中

问题:

居中“位置:固定;”水平和垂直弹出框具有动态宽度和高度,尽管使用边距:5% auto;

解决方案:

有几种方法可以实现此目的:

方法 1:固定宽度和高度

  1. 将 top 和 left 设置为 50%,以使 div 的左上角居中。
  2. 将 margin-top 和 margin-left 设置为负一半div 的高度和宽度,将中心向中间移动。
position: fixed;
width: 500px;
height: 200px;
top: 50%;
left: 50%;
margin-top: -100px; /* Negative half of height */
margin-left: -250px; /* Negative half of width */
登录后复制

接近2:动态宽度和/或高度

  1. 使用transform代替margin,将其设置为div相对宽度和高度的负一半。
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
登录后复制

方法3:固定宽度,但不关心垂直居中

  1. 给元素添加 left: 0 和 right: 0,同时将 margin-left 和 margin-right 设置为 auto。
position: fixed;
width: 500px;
margin: 5% auto; /* Only centers horizontally */
left: 0;
right: 0;
登录后复制

以上是如何使固定位置元素水平和垂直居中?的详细内容。更多信息请关注PHP中文网其他相关文章!

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板