Question

我从未完全满意我在网页中集中内容的各种解决方案。 <center>标签在18世纪中期已被弃用，但我没有看到合理的替代方案。具体来说，我想要的是一个居中的父DIV，但是对于其左上角，我可以“绝对地”设置事物。

有没有办法在不使用window.onresize javascript重新测量一切的情况下完成此操作？这似乎是一个相当直接的想法...我希望绝对定位的东西，我只想让0,0坐标相对于浏览器窗口左上角以外的其他东西。

现在，我所做的是设置一个div以使其内容居中，然后以相对位置面对面，但这非常令人厌烦，因为相对的物体不断地以我完全不想要的方式相互推动。

对此的任何和所有想法都非常感激。

Answer 1

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>

Answer 2

如果你坚持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;会使其居中。

Answer 3

这是你在找什么？

<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>

Answer 4

我很好的中心方法是使用“margin：auto”css标签。这适用于FF和Safari。只需给div一些宽度和一个自动边距，如果父级是100％宽度，那么这个div将居中对齐。

为了在IE中工作，您必须在父项上使用text-align：center属性，然后在实际居中的div上使用text-align。

AFAIK，无法将绝对坐标从0,0更改为其他仲裁点。亲戚是要走的路。

Answer 5

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

margin: 0 auto;

用于居中你的divs

Answer 6

在父级上使用相对定位，并为该属性提供相同的元素：

margin: 0 auto;

父母现在已定位，您应该能够在其中完全设置元素。

示例：

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

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

Answer 7

最简单的方法：

#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*/

}

无论大小如何，这都会使它正好位于中间位置。

希望有所帮助！

请参阅小提琴：http://jsfiddle.net/kfPC6/

Answer 8

如果0,0相对于div，你不想要相对定位吗？

Answer 9

text-align: center;属性执行<center>以前的属性，并且它远远优于它。

唯一的问题是，它使用起来有点复杂。一旦掌握了它，你就会想知道为什么你之前遇到这么多麻烦了！

您必须与页面上其他元素的属性协调使用它。这是开发人员/设计人员使用CSS和更新HTML技术的问题。它为我们提供了一种强大的方式来呈现我们的页面元素，但却使它变得更加复杂和严格。

迈克罗宾逊的回答肯定解决了你在这里遇到的问题，这是一个很好的例子。但...

我认为任何一个答案都不会向您展示如何正确使用text-align来解决您遇到的所有情况，但会尝试深入了解CSS的定位方式。

需要帮助CSS以绝对定位为中心

9 个答案: