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

StackOverflow https://stackoverflow.com/questions/1034449

  •  06-07-2019
  •  | 
  •  

题

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

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

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

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

有帮助吗？

解决方案

这是你在找什么？

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

其他提示

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>

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

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

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

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

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

margin: 0 auto;

用于居中你的divs

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

margin: 0 auto;

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

示例：

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

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

最简单的方法：

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

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

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

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

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

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

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

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top