如何从中心定位绝对元素-CSS

对于客户机，我需要在正文左侧放置一个包含广告的绝对div。到目前为止，我找到的唯一方法是创建一个绝对div。这里的问题是，在绝对定位div中，有一个黑色空间（即正文的末尾），我需要让这个“排水沟空间”广告包围页面

为了说明这一点，最好的方法是将其放置在远离页面中心的一组像素处。我想我可以通过以下代码来实现这一点：

position: absolute;
left:50%;
margin-right:500px;

---

但是，这只是将div保持在页面的中心。是否可以从页面中心定位绝对div

如果不是固定宽度，您可以：

position: absolute;
left: 20%;
top: 20%;
height: 60%;
width: 60%;

---

校样。

如果你知道广告的宽度，那么你可以这样做：

position:absolute;
left:50%;
margin-left:-250px;
width:500px;

---

请注意左边的负边距，它是要定位的元素宽度的一半

您可以在中心创建一个容器div，并以这种方式将div放置在其中：

<style type="text/css">
#container {
    position: relative;
    left:50%;
    padding-right:500px;
}
#left {
    position:absolute;
    left:-500px;
}

</style>

<div id="container">
    <div id="left">a</div>
</div>

#容器{
位置：相对位置；
左：50%；
右边填充：500px；
}
#左{
位置：绝对位置；
左：-500px；
}
A.

您不必给它绝对位置。。您可以利用块元素的默认溢出行为。。 例如，您可以使用以下代码来实现所需的结果：

标记：

<div id="adbox">
    <div class="content">
        <a href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nibh  odio, sollicitudin vel sodales vel, dignissim sed lacus. Praesent sed  erat sed turpis gravida congue. Nulla facilisi. Nunc eros eros, auctor  et auctor in, tempor quis magna. Curabitur in justo libero.</a>
    </div>
</div>
<div id="main-content">
    <p>Curabitur iaculis, dolor eu interdum fermentum, mi mauris vulputate est,  tempus rhoncus leo dolor nec orci. Duis a ante augue. Suspendisse  potenti. Proin luctus ultrices ligula, ac luctus lorem pellentesque non.  Curabitur sit amet eros dui, quis laoreet felis.</p>
</div>

#adbox {
    width: 400px;
    height: 0px;
    position: relative;
    z-index: 0;
    margin: 0 auto;
}
#adbox .content {
    background: #EEE;
}
#main-content {
    width:300px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    background: #CCC;
}
#main-content p {
    padding: 0 5px;
}

IE警告：

---

在IE中，您可以轻松地在CSS中执行。在所有主要浏览器中工作

<style type="text/css">
    #outer{
        width:100%;
        height:250px;
        background:#232323;
        position:relative;
    }

    #inner{
        position:absolute;
        width:300px;
        height:200px;
        background:red;
        top:0;
        left:50%; /*Important*/
        margin:-150px; /* WIDTH/2 */
    }
</style>

<div id="outer">
    <div id="inner">
    </div>
</div>

#外{
宽度：100%；
高度：250px；
背景:#2323；
位置：相对位置；
}
#内在的{
位置：绝对位置；
宽度：300px；
高度：200px；
背景：红色；
排名：0；
左：50%；/*重要*/
边距：-150px；/*宽度/2*/
}

这样就可以了

.centered{
//假设图像的高度为100，宽度为200
位置：固定；
最高：50%；
左：50%；
页边距顶部：-50px；//应用图像高度一半的负页边距
左边距：-100px；//应用图像宽度一半的负左边距
}

如果您想将某个对象居中，并保持其宽度/高度响应，则可以使用视口单位&具有良好的分辨率

通过以视口单位设置元素的宽度、高度和边距，可以使其居中，而无需使用任何其他技巧

在这里，这个矩形的高度为60vh，上下边距为20vh，加起来等于100vh（60+2*20），使它始终居中，即使在调整窗口大小时也是如此

#rectangle{
    width: 60vw;
    height: 60vh;
    margin: 20vh auto;
}

---

阅读更多内容

在2020年，正确的方法是使用

calc（）

。没有

中心

属性；定位是从角落进行的。因此，我们首先从左或右使用

50%

从中心获取位置，然后根据需要从中心添加或删除一个值

因此，要使用

left

从中心定位，请使用此选项。我们将500像素定位在中心的右侧，但是负值（中心的左侧）或使用其他单位也可以（相对或固定）

。示例{
左：计算（50%+500px）；
}

要在此示例中使用

right

属性，它是：

右侧：计算（50%-500px）；

参考资料：

---

不使用CSS，但如果JavaScript或众多库中的一个是一个选项，那么这并不难。虽然有相当多的数学可以应用于这样做。嗯。。。这个的语法是什么？我知道页面的宽度-这是一个合适的宽度-我只需要能够从中心定位这个。我是否需要使用javascript计算浏览器宽度，然后应用数学？如果是固定宽度的容器，则可以添加相对于容器的位置，并从容器中定位广告。。如果广告是containeradbox的子项，则其固定宽度为125px：站点本身（和当前包装器）的宽度为988，我认为我不理解其逻辑。我希望它离中心有一个固定的宽度-为什么左边的边距必须是宽度的一半？按宽度-您指的是广告的宽度，对吗？这似乎没有考虑到页面的宽度。你试过了吗？你可以把左边的边距增加到你想要的任何程度。这应该行得通，只要把左边的边距调整到你需要的从中心的偏移量就行了。我只是在编辑我的答案后才注意到这个答案。。是的，这是正确的解决方案：尝试一下。注意：如果您正在寻找一种响应性定心解决方案，请参阅我的另一个答案。我们的页面是固定宽度988，这对它没有多大帮助。不过谢谢。我没有这样做-这个方法不会让我走得比正文更宽。这是最接近的方法，但文档正文超出了这个范围，并且没有显示广告。我尝试更改z索引，但没有任何运气。

#rectangle{
    width: 60vw;
    height: 60vh;
    margin: 20vh auto;
}