需要帮助CSS绝对定位居中问题

Question

需要帮助CSS绝对定位居中问题

htmlcsscss-position

10

我对于在网页中居中内容的各种解决方法并不完全满意。 <center>标签自18世纪中期就已经被弃用，但是我仍然无法找到一个合理的替代方案。具体而言，我想要一个居中的父级DIV，并希望将其左上角设置为“绝对”位置。

有没有一种方法可以在不使用window.onresize javascript重新测量所有内容的情况下实现这一点？这似乎是一个非常简单的想法...我想要绝对定位的东西，只是希望0,0坐标相对于除了浏览器窗口左上角之外的其他某个位置。

目前我的解决方法是将一个div设置为居中显示其内容，然后进行相对定位处理，但这非常繁琐，因为相对对象会以我完全不需要的方式相互推挤。

非常感谢任何关于此问题的想法。

- Yevgeny Simkin

9个回答

8

如果你坚持使用position: absolute;，那么需要将想要定位的div设置为position: relative;，以使其成为任何子元素的定位上下文。

要居中绝对定位的div，需要知道它的宽度，然后使用以下CSS：

#wrapper {
    width: 800px;
    margin: 0 auto;
    position: relative; /* creates a positioning context for child elements */
}

#child {
    position: absolute;
    width: 400px;
    left: 50%;
    margin-left: -200px;
}

同时，HTML 也是这样：

<div id="wrapper">
    <div id="child">
        ....
    </div>
</div>

你可以根据需要调整宽度和左边距（负的左边距应该是你要居中的 div 宽度的一半，例如 #child）。

正如其他人提到的那样，在设置了宽度的元素上使用 margin: 0 auto; 将使其居中。

- roborourke

6

这是您正在寻找的吗？

<div style=" position: absolute;
             display: inline-block;
             top: 20%;
             bottom: 20%;
             right: 20%;
             left: 20%;
             background-color: #434154;
             text-align: center;">
    <div style="display: inline-block;
                height: 100%;
                vertical-align: middle;"></div>
    <div style="position: relative;
                color: #FFFFFF;
                background-color: #546354;
                display: inline-block;
                vertical-align: middle;">
               THIS IS CENTERED WITHOUT SCRIPTING :D
    </div>
</div>

- chinanzio

是的，谢谢。实际上我更喜欢这个答案而不是我之前选择的那个。 - Yevgeny Simkin

3

一个不错的居中元素的方法是使用"margin:auto" css标签。这在FF和Safari中有效。只需给一个div设置宽度和自动边距，如果父容器是100%宽度，则此div将自动居中对齐。

要使其在IE中起作用，您必须在父级上使用"text-align:center"属性，然后在实际居中的div中使用"text-align:left"。

据我所知，没有办法将绝对坐标从0,0更改为其他任意点。相对定位是正确的方法。

- Shreyas

你可以使用left、right、top和bottom CSS属性来定位相对或绝对定位的元素，例如：top: 10px; 可以将元素从顶部向下移动10像素。 - roborourke

1

也许我没有理解任务，但我认为你可以使用

margin: 0 auto;

用于将你的div居中

- Roman

1

在父元素上使用相对定位，并将同一元素设置为以下属性：

margin: 0 auto;

父元素现在已定位，您应该能够在其中绝对设置元素。

示例：

div#page{
  position:relative;
  width:400px;
  margin:0 auto;
}

div#page #absoluteExample{
  position:absolute;
  top:18px;
  left:100px;
}

- moorej

1

最简单的方法：

#element {

position: absolute; /*Absolute Position*/

top: 0; 
left: 0;          /*Set the 4 coordinates to zero*/
bottom: 0; 
right: 0;

margin: auto;      /*Margin to Auto*/

height: 150px;   /*Set the Height and Width*/
width:150px;

background:green; /* Backgroung:optional*/

}

这将使其居中，无论它的大小。

希望这有所帮助！

查看Fiddle: http://jsfiddle.net/kfPC6/

- ErickBest

0

如果0,0将相对于一个div，您不想要相对定位吗？

- Tony

不，我希望那个 div 中的元素具有确切的位置，但如果你开始将它们设置为“absolute”，它们会与浏览器的左上角对齐，而不是父 div。 - Yevgeny Simkin

0

text-align: center; 属性可以取代 <center> 标签的功能，并且在实际应用中更加优秀。

不过需要注意的是，它使用起来会稍微复杂一些。一旦掌握，你会惊讶于以前为什么会有这么多麻烦！

你必须与页面上其他元素的属性配合使用它。这就是开发者/设计师在 CSS 和较新的 HTML 技术方面遇到的问题。它给我们提供了一种强大的方式来呈现页面元素，但使整个过程变得更加复杂和严格。

Mike Robinson 的答案当然解决了你在此处遇到的问题，而且是一个很好的例子。但是...

我认为没有任何一个答案能够向您展示如何正确地使用 text-align 处理您将遇到的所有情况，但可以尝试更深入地了解 CSS 中的定位方式。

- Travis

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Mike Robinson · Accepted Answer

body { text-align: center; }
#wrapper { width: 960px; margin: 0 auto; text-align: left; position: relative; }
#wrapper .child { position: absolute; left: 0; top: 0; }

这只是示例代码，但任何 .child 元素都会在包装器的 0,0 位置。

任何绝对定位的元素都将绝对定位到其最近的相对定位父元素。如果一个元素没有带有相对定位的父元素，它就会使用文档作为参考位置。下面是一个没有类的示例（为了清晰起见添加了一些颜色和宽度样式）。

<html>
    <body style="text-align: center;">
        <div style="position: relative; width: 100px; height: 100px; margin: 0 auto; background: red;">
            <div style="position: absolute; left: 0; top: 0;">
                This will absolutely position relative to the container div.
            </div>
        </div>
        <div style="position: absolute; left: 0; top: 0; width: 100px; height: 100px; background: blue;">
            This will absolutely position relative to the document
        </div>
    </body>
</html>