如何使用CSS将元素绝对定位于中心位置

Question

为了给客户做一个广告，我需要在body左侧放置一个absolute定位的div。目前我唯一想到的方法是创建一个absolute定位的div。但问题在于在这个绝对定位的div中有一个黑色空间(即body的结束位置)，而我需要这个"装订线空间"贴合页面。

为了解决这个问题，最好的方法是将其相对于页面中心位置设定一定的像素偏移量。我认为可以通过以下代码实现：

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

然而，这只是使div保持在页面的中心位置。是否有可能将绝对定位的div从页面中心位置开始定位？

- Bob Cavezza

---

不是使用CSS，而是如果JavaScript或其中的许多库是一个选项，那么这并不太难。虽然需要应用相当多的数学知识来实现。 - David Thomas

嗯...这个的语法应该是什么？我知道页面的宽度 - 它是适合宽度 - 我只需要能够从中心定位这个。我需要用JavaScript计算浏览器的宽度然后应用数学公式吗？ - Bob Cavezza

如果容器是固定宽度的，则可以将相对位置添加到容器中，并从容器内部定位广告。如果广告是容器的子元素。 - Mark Steggles

adbox 将具有 125 像素的固定宽度：网站本身（以及当前的包装器）为 988 像素宽。 - Bob Cavezza

Answer 1

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

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

请注意负的margin-left值，它是被定位元素宽度的一半。

- Mark Steggles

---

我不认为我理解这个逻辑。我希望它距离中心有一个固定的宽度 - 为什么margin-left必须是宽度的一半？通过宽度 - 你指的是广告的宽度，对吗？这似乎没有考虑页面的宽度。 - Bob Cavezza

你试过了吗？你可以将margin-left增加到任何你想要的值。 - Mark Steggles

这应该可以工作，只需将左边距调整到您需要的中心偏移量即可。 - Victor

我在编辑我的答案后才注意到这个回答。是的，这是正确的解决方案：试一试。 - Lucius

注意：如果您正在寻找响应式居中解决方案，请查看我的其他答案。 - Mark Steggles

Answer 2

如果您想将某些内容居中并保持响应式的宽度/高度，那么可以使用视口单位，并且浏览器支持良好。通过在视口单位中设置元素的宽度、高度和边距，您可以在不使用其他技巧的情况下将其居中。这个矩形的高度为60vh，上下边距为20vh，总共为100vh（60+2*20），因此即使在窗口调整大小时也始终居中。

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

阅读更多这里

- Mark Steggles

Answer 3

你可以在 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>

- Mifas

Answer 4

如果它不是固定宽度，您可以这样做:

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

证明这里。

- Linus Kleen

---

我们的页面固定宽度为988，但这对它并没有太大的帮助。不过还是谢谢。 - Bob Cavezza

Answer 5

你可以创建一个居中的容器 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>

- István Ujj-Mészáros

---

没起作用 - 这种方法不让我超出页面主体的宽度。 - Bob Cavezza

这是最接近的方法，但文档的主体超出了此范围，因此广告没有显示。我尝试更改z-index，但没有成功。 - Bob Cavezza

Answer 6

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

标记：

<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<= 6中，height属性被解释为其他浏览器使用min-height的方式：您可能需要添加一些特定样式来解决此问题。

---

或者，您可以绝对定位广告并采用以下方式：http://jsfiddle.net/bssxg/10/

#adbox { width: 400px; position: absolute; z-index: 0; top: 0; left: 50%; margin-left: -200px; }

（左边的负边距等于广告框宽度的一半）

- Lucius

Answer 7

在2020年，正确的做法是使用calc()。没有center属性；定位是从角落进行的。因此，我们首先使用50%从左侧或右侧获取中心位置，然后根据需要添加或移除一个值。

所以要使用left从中心定位，可以使用以下方法。在这里，我们将位置设置为相对于中心向右500像素，但是使用负值（相对于中心向左）或其他单位（相对或固定）也可以。

.example {
  left: calc(50% + 500px);
}

要在此示例中使用right属性，它是：

right: calc(50% - 500px);

参考资料：

• https://caniuse.com/#feat=calc
• https://developer.mozilla.org/en-US/docs/Web/CSS/calc

- user2493235

Answer 8

这样就可以了

.centered {
    //Assume image is 100 in height and 200 in width
    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: -50px; // applying a negative top margin of half the images height
    margin-left: -100px; // applying negative left margin of half the images width
}

- Computernerd