如何从中心绝对定位元素 - CSS
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4463677/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to Position an Element Absolute from Center - CSS
提问by Bob Cavezza
For a client, I need to put together an absolute div to the left of the body containing an advertisement. The only way I have figured out how to do this thus far is to create an absolute div. The issue here is that in the absolute positioned div, there is a black space (which is the end of the body) and I need to have this "gutter space" ad hugging the page.
对于客户，我需要在包含广告的正文左侧放置一个绝对 div。到目前为止，我想出如何做到这一点的唯一方法是创建一个绝对的 div。这里的问题是，在绝对定位的 div 中，有一个黑色空间（即正文的末尾），我需要让这个“装订线空间”广告紧贴页面。
To account for this, the best method is to position this a set number of pixels away from the center of the page. I thought I could do this by the following code:
考虑到这一点，最好的方法是将其放置在距页面中心一定数量的像素处。我想我可以通过以下代码来做到这一点：
position: absolute;
left:50%;
margin-right:500px;
However, this just keeps the div in the center of the page. Is it possible to position an absolute div from the center of a page?
但是，这只是将 div 保持在页面的中心。是否可以从页面中心定位绝对 div？
回答by Mark Steggles
If you know the width of the advertisement then you can do this:
如果您知道广告的宽度，那么您可以这样做：
position:absolute;
left:50%;
margin-left:-250px;
width:500px;
notice the negative margin-left which is half of the width of the element to be positioned
注意负的 margin-left 是要定位的元素宽度的一半
回答by Mark Steggles
If you want to center something and keep it responsive width/height then you can use viewport units & with good browser support
如果您想居中并保持其响应宽度/高度，那么您可以使用视口单位并具有良好的浏览器支持
By setting an element's width, height and margins in viewport units, you can center it without using any other tricks.
通过以视口单位设置元素的宽度、高度和边距，您可以在不使用任何其他技巧的情况下将其居中。
Here, this rectangle has a height of 60vh and top and bottom margins of 20vh, which adds up to a 100vh (60 + 2*20) making it always centered, even on window resize.
在这里，这个矩形的高度为 60vh，顶部和底部边距为 20vh，加起来为 100vh (60 + 2*20)，使其始终居中，即使在调整窗口大小时也是如此。
#rectangle{
width: 60vw;
height: 60vh;
margin: 20vh auto;
}
Read more here
在这里阅读更多
回答by Mifas
You can do easily in CSS. Working in All major browsers
您可以在 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>
回答by Linus Kleen
回答by István Ujj-Mészáros
You can make a container div at center, and place your div inside it this way:
您可以在中心创建一个容器 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>
回答by Lucius
You don't necessarily need to give it absolute position.. You could exploit the default overflow behaviour of block elements.. For example, you could achieve the desired result by using a code like this:
你不一定需要给它绝对位置..你可以利用块元素的默认溢出行为..例如，你可以通过使用这样的代码来实现所需的结果：
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>
STYLE:
风格：
#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 warning:in IE <= 6 the heightproperty is interpreted as any other browser does with min-height: you might want to add some specific style to fix this issue.
IE 警告：在 IE <= 6 中，该height属性被解释为任何其他浏览器所做的min-height：您可能想要添加一些特定样式来解决此问题。
Or else, you could absolutely position the ad and go this way: http://jsfiddle.net/bssxg/10/
否则，您可以绝对定位广告并按照以下方式进行：http: //jsfiddle.net/bssxg/10/
#adbox { width: 400px; position: absolute; z-index: 0; top: 0; left: 50%; margin-left: -200px; }
(the left negative margin being equal to half the width of the ad box)
（左边的负边距等于广告框宽度的一半）
回答by Computernerd
This would do the trick
这可以解决问题
.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
}
回答by Nigel B. Peck
In 2020, the correct way to do this is using calc(). There is no centerproperty; positioning is done from corners. So we first take the position from center using 50%from left or right, and then add or remove a value from center as needed.
在 2020 年，正确的方法是使用calc(). 没有center财产；定位是从角落完成的。所以我们首先使用50%from left 或 right从中心获取位置，然后根据需要从中心添加或删除一个值。
So to use leftto position from the center, use this. We are positioning 500 pixels to the right of center here, but a negative value (left of center) or using other units would be fine too (relative or fixed).
所以要使用left从中心定位，使用这个。我们在此处将 500 像素定位到中心右侧，但负值（中心左侧）或使用其他单位也可以（相对或固定）。
.example {
left: calc(50% + 500px);
}
To use the rightproperty for this example, it's:
要在right此示例中使用该属性，它是：
right: calc(50% - 500px);
References:
参考：
