10

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

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

现在，我所做的是设置一个 div 以使其内容居中，然后使用相对定位来绕圈，但这很烦人，因为相对对象会以我完全不想要的方式相互推动。

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

4

9 回答 9

12 
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>
于 2009-06-23T18:59:35.537 回答
8

如果您坚持使用，position: absolute;那么将您希望放置的东西设置为必须position: relative;使其进入任何子元素的定位上下文的 div。

要使绝对定位的 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;，在设置了宽度的元素上使用它会使它居中。

于 2009-06-23T19:12:53.137 回答
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>
于 2013-06-22T09:51:33.970 回答
3

我把东西居中的好方法是使用“margin：auto”css标签。这适用于 FF 和 Safari。只需给 div 一些宽度和自动边距，如果父级为 100% 宽度，则此 div 将自行居中对齐。

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

AFAIK，没有办法将绝对坐标从 0,0 更改为其他仲裁点。相对是要走的路。

于 2009-06-23T18:58:44.337 回答
1

也许我不明白这个任务，但我认为你可以使用

margin: 0 auto;

使您的 div 居中

于 2009-06-23T18:59:35.880 回答
1

在父元素上使用相对定位并为同一元素赋予属性：

margin: 0 auto;

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

例子：

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

div#page #absoluteExample{
  position:absolute;
  top:18px;
  left:100px;
}
于 2009-06-23T19:11:31.940 回答
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*/

}

无论大小如何，这都会将其放在中间。

希望有帮助！

见小提琴：http: //jsfiddle.net/kfPC6/

于 2013-10-16T15:09:34.113 回答
0

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

于 2009-06-23T18:57:12.310 回答
0

该 text-align: center;物业做了<center>过去的事情，并且比它优越得多。

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

您必须将它与页面上其他元素的属性配合使用。这就是开发人员/设计人员在使用 CSS 和更新的 HTML 技术时遇到的问题。它为我们提供了一种展示页面元素的强大方式，但使其更加复杂和严格。

Mike Robinson 的回答肯定解决了您在这里遇到的问题，这是一个很好的例子。但...

我认为任何一个答案都不会向您展示如何text-align正确使用您将遇到的所有情况，但请尝试更深入地研究 CSS 中的定位如何工作。

于 2009-06-23T19:53:45.067 回答