Html 对齐css中的固定项 我想把中间的一个图像对齐。通过给div一个宽度和边距：auto，非常容易。但div还应携带位置：固定属性，但事实证明，它们并不在一起

这是我的HTML：

<div class="header_container">
    <div class="header">
        <div class="header_links_icon">
            <a href="https://www.facebook.com target="_blank" class="header_facebook">
                <div class="header_facebook_icon">&nbsp;</div>
            </a>
            <a href="https://twitter.com/" target="_blank" class="header_facebook">
                <div class="header_twitter_icon">&nbsp;</div>
            </a>
        </div>
    </div>
</div>

---

这是标题，PNG图像应该在屏幕中部对齐并被定位固定…我怎样才能做到这一点呢？

您可以将标头容器固定，然后您的

。标头将可以工作：

.header_container {
    background-color: black;
    padding-top: 35px;
    position: fixed;
    top:0;
    left:0;
    right:0;
}

.header {
    background-image: url('../images/css/header.png');
    background-repeat: no-repeat;
    height: 605px;
    width: 1440px;
    margin: auto;
}

另一种方式是负利润：

.header {
    background-image: url('../images/css/header.png');
    background-repeat: no-repeat;
    height: 605px;
    width: 1440px;
    position: fixed;
    left: 50%;
    margin-left: -720px;
}

//assuming the block is 200px wide and 100px tall
.centered {
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -50px;
  margin-left: -100px;
}

您可以修复标头容器，然后您的
.header
就可以工作了：

.header_container {
    background-color: black;
    padding-top: 35px;
    position: fixed;
    top:0;
    left:0;
    right:0;
}

.header {
    background-image: url('../images/css/header.png');
    background-repeat: no-repeat;
    height: 605px;
    width: 1440px;
    margin: auto;
}

另一种方式是负利润：

.header {
    background-image: url('../images/css/header.png');
    background-repeat: no-repeat;
    height: 605px;
    width: 1440px;
    position: fixed;
    left: 50%;
    margin-left: -720px;
}

//assuming the block is 200px wide and 100px tall
.centered {
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -50px;
  margin-left: -100px;
}

必须将左侧位置设置为百分之五十，将左侧边距设置为元素宽度的一半。这仅适用于具有设置宽度的项目


必须将左侧位置设置为百分之五十，将左侧边距设置为元素宽度的一半。这仅适用于具有设置宽度的项目


问题在于，您可以使用百分比或像素定位固定元素。它们都不会进行适当的偏移计算以使其真正居中。因此，您必须修改位置，使其正常运行

按百分比定位并用负利润抵消：

.header {
    background-image: url('../images/css/header.png');
    background-repeat: no-repeat;
    height: 605px;
    width: 1440px;
    position: fixed;
    left: 50%;
    margin-left: -720px;
}

//assuming the block is 200px wide and 100px tall
.centered {
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -50px;
  margin-left: -100px;
}

或者，您可以通过固定容器的位置将其居中，然后将对象置于该容器的中心位置（如@rgthree所述），这同样有效。
问题在于，您可以使用百分比或像素定位固定元素。它们都不会进行适当的偏移计算以使其真正居中。因此，您必须修改位置，使其正常运行

按百分比定位并用负利润抵消：

.header {
    background-image: url('../images/css/header.png');
    background-repeat: no-repeat;
    height: 605px;
    width: 1440px;
    position: fixed;
    left: 50%;
    margin-left: -720px;
}

//assuming the block is 200px wide and 100px tall
.centered {
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -50px;
  margin-left: -100px;
}

或者，您可以通过固定容器的位置将其居中，然后将对象置于该容器内的中心位置（如@rgthree所述），这也可以起作用。
这可能会起作用：

.center {width:1440px;margin:0 auto;}

.header {width:1440px;position:fixed;etc...} // don't use margin:auto here

在哪里

这可能会起作用：

.center {width:1440px;margin:0 auto;}

.header {width:1440px;position:fixed;etc...} // don't use margin:auto here

在哪里

您好，您可以将固定位置指定给主标题容器类，这样就可以工作了

    .header_container {
    background-color: black;
    position: fixed;
    top:0;
    left:0;
    right:0;
}

.header {
    background:green;
    height: 100px;
    width: 500px;
    margin: auto;
}

请参见演示：-
您好，您可以将固定位置指定给主标题容器类，这样就可以工作了

    .header_container {
    background-color: black;
    position: fixed;
    top:0;
    left:0;
    right:0;
}

.header {
    background:green;
    height: 100px;
    width: 500px;
    margin: auto;
}

请参阅演示：-
在父标题类中指定固定位置，而不是在标题子类中使用固定位置

.header_container {        
        position: fixed;
        top:0;
        left:0;
        right:0;

}

在父标题类中指定固定位置，而不是在标题子类中使用固定位置

.header_container {        
        position: fixed;
        top:0;
        left:0;
        right:0;

}

可能将.header包装在一个div中，宽度为1440px，边距为自动，从.header中删除边距自动，并保留.header位置：固定，宽度：100%。。。？只是一个猜测…可能将.header包装在一个div中，宽度：1440px，边距自动，从.header中删除边距自动，并保留。header位置：固定，宽度：100%。。。？只是一个猜测。。。