Question

对于客户来说，我需要将包含广告的正文左侧的绝对div放在一起。到目前为止，我弄清楚如何做到这一点的唯一方法是创建一个绝对div。这里的问题是，在绝对定位的div中，有一个黑色空间（这是身体的末端），我需要拥有这个“阴沟空间”广告来拥抱页面。

为了解决这个问题，最好的方法是将此位置设置为距离页面中心一定数量的像素。我想我可以通过以下代码来做到这一点：

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

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

Answer 1

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

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

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

Answer 2

如果您想要居中并保持响应宽度/高度，那么您可以使用视口单元和放大器。好browser support

通过以视口单位设置元素的宽度，高度和边距，您可以不使用任何其他技巧将其居中。

这里，这个矩形的高度为60vh，顶部和底部边距为20vh，加起来为100vh（60 + 2 * 20），即使在窗口调整大小时也始终居中。

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

了解更多here

Answer 3

如果它不是固定宽度，你可以这样做：

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

证明here。

Answer 4

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

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>

Answer 6

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

<强> MARKUP：

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

否则，您绝对可以定位广告并采用这种方式：http://jsfiddle.net/bssxg/10/

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

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

Answer 7

这可以解决问题

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

Answer 8

2020年，正确的方法是使用calc()。没有center属性；定位是从角落完成的。因此，我们首先使用50%从左边或右边从中心位置开始，然后根据需要从中心添加或删除值。

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

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

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

right: calc(50% - 500px);

参考：

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

8 个答案: