CSS - 将 div 固定到顶部中心

Posted 2023-03-05

【中文标题】CSS - 将 div 固定到顶部中心

【英文标题】：CSS - fix div to top center

【发布时间】：2014-06-16 01:16:36

【问题描述】：

我想在 100% 宽度的标题内居中 div。需要居中的 div 具有物理宽度和高度。我尝试过使用绝对位置，但是在调整屏幕大小时，div 将保持居中。我希望 div 留在设计的中心，而不是屏幕。我该如何做到这一点？我也不想为此使用固定位置。

css:

header
  position: relative;
  width: 100%;
  height: 65px;
  background-color: #662D91;

#banner
  position: absolute;
  left: 50%;
  margin-left: -240px;
  width: 480px;
  height: 115px;
  border-radius: 20px;

html：

    <header>
        <div id="banner">
            <a href="/index">
                <img src="/_images/layout/PentaOneStop_headerLogo.png" class="img-center" />
            </a>
        </div>
    </header>

编辑：我通过在全宽标题和设计宽度的徽标之间添加一个 div 解决了我的问题。它似乎解决了我的问题。

我的问题解决方案的JSFiddle：http://jsfiddle.net/U3Hpa/2/

【问题讨论】：

制作div的左右边距auto

How to center a div in a div - horizontally?的可能重复

@BryanDowning 不完全是我想要的，因为我已经能够将它居中，只是不希望它与窗口居中。

@Phorden 我现在不认为我理解这个问题。以什么为中心？

@13ruce1337 抱歉，我可能没有说得清楚。我希望它以设计的宽度（980px）而不是视口的宽度为中心。

【参考方案1】：

简单的解决方案是做 text-align: center.

#banner
  text-align: center;

http://jsfiddle.net/U3Hpa/

【参考方案2】：

我通过添加另一个 div 解决了我的问题，该 div 是 header 元素的子元素，但 #banner 的父元素。然后我将其设置为 980px 的宽度（与内容容器的宽度相同），并将其设置为 margin: 0 auto;。这似乎解决了我的问题。我一直在寻找一种不更改 HTML 标记的 CSS 解决方案，但我找不到。感谢所有反馈。

由于视口小，Fiddle并没有最好地说明解决方案，但代码是准确的。

JSFiddle：http://jsfiddle.net/U3Hpa/2/

【参考方案3】：

#banner
  margin-left: auto;
  width: 480px;
  height: 115px;
  border-radius: 20px;

通过手动定义左侧位置和边距，您可以让浏览器执行此操作，而不管其他 div 的大小如何。

边距中的自动功能将自动使 div 相对于标题居中

【参考方案4】：

你应该试试这个：

 #banner
 position: fixed;
 left: 50%;
 margin-left: auto;
 margin-right: auto;
 width: 480px;
 height: 115px;
 border-radius: 20px;
 

【参考方案5】：

试试这个：

header
  position: relative;
  width: 980px;
  height: 65px;
  background-color: #662D91;

#banner
  position: relative;
  margin: 0 auto;
  width: 480px;
  height: 115px;
  border-radius: 20px;