如何使 div 在页面的同一时间中心保持在顶部？

Posted 2023-03-12

【中文标题】如何使 div 在页面的同一时间中心保持在顶部？

【英文标题】：How to make the div stick to top, on the same time center of page?

【发布时间】：2014-06-09 17:42:11

【问题描述】：

我有一个高度和宽度固定的 div，我使用左右边距 auto 居中。但是我希望这个栏在我的整个页面中都可见，所以我使用position:absolute 将其粘贴。但随后条形图向左移动，不再居中。如何将栏固定到顶部居中位置？

<div class="bar">bar</div>

.bar
    width: 400px;
    height: 40px;
    margin-left:auto;
    margin-right:auto;
    background-color:orange;

Here 是小提琴。

【问题讨论】：

您可以使用position: fixed; 并使用top 和right 值来确定其在屏幕上的确切位置。警告：如果用户滚动/等，它不会移动。

@TylerH 你能给我看看小提琴吗？

【参考方案1】：

尝试使用 100% 宽度的容器 div，将其固定到顶部，然后将您的栏居中放置在其中。 CSS：

.bar
    width: 400px;
    height: 40px;
    margin:0 auto;
    background-color:orange;

.container

width:100%;
    position:fixed;
    top:0px;
    left:0px;

Updated Fiddle

【参考方案2】：

http://jsfiddle.net/hkZju/12/

.bar
    width: 400px;
    height: 40px;
    top:0;
    left:50%;
   margin-left:-200px;
    background-color:orange;
    position:fixed;

【参考方案3】：

.bar
width: 400px;
height: 40px;
left : 50%;
margin-left:-200px;
top : 0%;
position : absolute;
background-color:orange;

【讨论】：

这是有保证的......试试@javad。仔细看我使用的是“margin-left”

@Javad on margin left 50%, div 将有 50% 在左边，也就是说，div 将从页面中间开始，向右。给它一个 50% 宽度的 -ve 边距（这里是 200px）肯定会将 div 的中点拉到页面的中心。

@blasteralfredΨ 是的，你是对的，对不起；我没看到宽度是400px；但是如果宽度是百分比呢？

宽度如何以百分比表示？如果可以，那么您将不得不应用其他方法

【参考方案4】：

您需要将.bar 放在具有position: absolute 和width: 100% 的div 中

检查这个小提琴demo

.bar
   position: absolute;
   width: 100%;


.bar div 
   width: 400px;
   height: 40px;
   margin-left:auto;
   margin-right:auto;
   background-color:orange;    

【参考方案5】：

我想添加：

position: fixed top right;

就像 TylerH 说的，或者

position:absolute top right;

将是您的最佳选择。更灵活。

固定为始终显示，绝对“固定”到页面。

【参考方案6】：

所以栏将保持在顶部，即使您滚动页面，您也必须使用position:fixed。然后，要将其居中，将左侧设置为 50%，将 margin-left 设置为减去宽度的一半。

.bar
    width: 400px;
    height: 40px;
    position: fixed;
    top: 10px;
    left: 50%;
    margin-left: -200px;
    background-color:orange;

http://jsfiddle.net/hkZju/9/

【讨论】：

对不起。我没明白你的意思。

【参考方案7】：

您可以使用jquery通过动态更改div的左值来处理这个问题，下面是代码 -

$(document).ready(function()
   $('.bar').css('left',($(document).width() - $('.bar').width())/2);
);

或者如果你想用 css 来做 - 添加下面的 css 属性

.bar
 left : 50%;
 margin-left:-200px;//should be half in the width of the div