Html 如何将“位置：绝对”元素居中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8508275/
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 center a "position: absolute" element
提问by user1098278
I'm having a problem centering an element that has the attribute positionset to absolute.
Does anyone know why the images are not centered?
我在将属性position设置为 的元素居中时遇到问题absolute。有谁知道为什么图像不居中？
body {
text-align: center;
}
#slideshowWrapper {
margin-top: 50px;
text-align: center;
}
ul#slideshow {
list-style: none;
position: relative;
margin: auto;
}
ul#slideshow li {
position: absolute;
}
ul#slideshow li img {
border: 1px solid #ccc;
padding: 4px;
height: 450px;
}<body>
<div id="slideshowWrapper">
<ul id="slideshow">
<li><img src="img/dummy1.JPG" alt="Dummy 1" /></li>
<li><img src="img/piano_unlicened.JPG" alt="Dummy 2" /></li>
</ul>
</div>
</body>回答by baaroz
If you have set a width you may use:
如果您设置了宽度，您可以使用：
position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
text-align: center;
回答by Hashem Qolami
Without knowing the width/heightof the positioned1element, it is still possible to align it as follows:
在不知道定位的1元素的width/ 的情况height下，仍然可以将其对齐如下：
.child {
position: absolute;
top: 50%; /* position the top edge of the element at the middle of the parent */
left: 50%; /* position the left edge of the element at the middle of the parent */
transform: translate(-50%, -50%); /* This is a shorthand of
translateX(-50%) and translateY(-50%) */
}
It's worth noting that CSS Transformis supported in IE9 and above. (Vendor prefixes omitted for brevity)
值得注意的是，IE9 及以上版本支持CSS Transform。（为简洁起见省略了供应商前缀）
Explanation
解释
Adding top/leftof 50%moves the top/left margin edge of the element to the middle of the parent, and translate()function with the (negative)value of -50%moves the element by the half of its size. Hence the element will be positioned at the middle.
添加top/ leftof50%将元素的顶部/左边距边缘移动到父元素的中间，并translate()使用（负）值的函数-50%将元素移动其大小的一半。因此该元素将被定位在中间。
This is because a percentage value on top/leftproperties is relative to the height/width of the parent element (which is creating a containing block).
这是因为top/left属性上的百分比值是相对于父元素（它正在创建一个包含块）的高度/宽度。
While a percentage value on translate()transformfunction is relative to width/height of the element itself (Actually it refers to the size of bounding box).
虽然变换函数的百分比值是相对于元素本身的宽度/高度（实际上它指的是边界框的大小）。translate()
For unidirectional alignment, go with translateX(-50%)or translateY(-50%)instead.
对于单向对齐，使用translateX(-50%)或translateY(-50%)代替。
1. An element with a positionother than static. I.e. relative, absolute, fixedvalues.
1. 具有position以外的元素static。即relative, absolute,fixed值。
回答by bookcasey
Centering something absolutely positioned is rather convoluted in CSS.
absolute在 CSS 中居中放置的东西是相当复杂的。
ul#slideshow li {
position: absolute;
left:50%;
margin-left:-20px;
}
Change margin-leftto (negative) half the width of the element you are trying to center.
更改margin-left为您尝试居中的元素宽度的（负）一半。
回答by Sebin Simon
Div vertically and horizontally aligned center
Div 垂直和水平对齐居中
top: 0;
bottom: 0;
margin: auto;
position: absolute;
left: 0;
right: 0;
Note : Elements should have width and height to be set
注意：元素应该有宽度和高度要设置
回答by cutez7boyz
A simple CSS trick, just add:
一个简单的 CSS 技巧，只需添加：
width: 100%;
text-align: center;
This works on both images and text.
这适用于图像和文本。
回答by Wesley Brian Lachenal
If you want to center an absolute element
如果要居中绝对元素
#div {
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
width:300px; /* Assign a value */
height:500px; /* Assign a value */
margin:auto;
}
If you want a container to be centered left to right, but not with top to bottom
如果您希望容器从左到右居中，而不是从上到下
#div {
position:absolute;
left:0;
right:0;
width:300px; /* Assign a value */
height:500px; /* Assign a value */
margin:auto;
}
If you want a container to be centered top to bottom, regardless of being left to right
如果您希望容器从上到下居中，无论从左到右
#div {
position:absolute;
top:0;
bottom:0;
width:300px; /* Assign a value */
height:500px; /* Assign a value */
margin:auto;
}
Update as of December 15, 2015
截至 2015 年 12 月 15 日的更新
Well I learnt this another new trick few months ago. Assuming that you have a relative parent element.
好吧，几个月前我又学到了另一个新技巧。假设您有一个相对的父元素。
Here goes your absolute element.
这是你的绝对元素。
.absolute-element {
position:absolute;
top:50%;
left:50%;
transform:translate(-50%, -50%);
width:50%; /* You can specify ANY width values here */
}
With this, I think it's a better answer than my old solution. Since you don't have to specify width AND height. This one it adapts the content of the element itself.
有了这个，我认为这是一个比我旧的解决方案更好的答案。因为您不必指定宽度和高度。这个它适应元素本身的内容。
回答by Vadamadafaka
To center a “position: absolute” element.
将“位置：绝对”元素居中。
.your-element {
position: absolute;
left: 0;
right: 0;
text-align: center; // or this -> margin: 0 auto;
}
回答by Deplake
This worked for me:
这对我有用：
position: absolute;
left: 50%;
transform: translateX(-50%);
回答by Rednas
to center a a position:absolute attribute you need to set left:50% and margin-left: -50% of the width of the div.
要居中 aa position:absolute 属性，您需要设置 left:50% 和 margin-left: div 宽度的-50%。
<!-- for horizontal -->
<style>
div.center{
width:200px;
left:50%;
margin-left:-100px;
position:absolute;
}
</style>
<body>
<div class='center'>
should be centered horizontaly
</div>
</body>
for vertical center absolute you need to do the same thing bud not with left just with top. ( NOTE: html and body must have min-height 100%; )
对于垂直中心绝对，你需要做同样的事情，而不是只用顶部。（注意：html 和 body 必须有 min-height 100%；）
<!-- for vertical -->
<style>
body,html{
min-height:100%;
}
div.center{
height:200px;
top:50%;
margin-top:-100px;
position:absolute;
}
</style>
<body>
<div class='center'>
should be centered verticaly
</div>
</body>
and can be combined for both
并且可以两者结合使用
<!-- for both -->
<style>
body,html{
min-height:100%;
}
div.center{
width:200px;
height:50px
left:50%;
top:50%;
margin-left:-100px;
margin-top:-25px;
position:absolute;
}
</style>
<body>
<div class='center'>
should be centered
</div>
</body>
回答by Mohammad Dayeh
<div class="centered_content"> content </div>
<style type="text/css">
.centered_content {
text-align: center;
position: absolute;
left: 0;
right: 0;
}
</style>
see demo on: http://jsfiddle.net/MohammadDayeh/HrZLC/
见演示：http: //jsfiddle.net/MohammadDayeh/HrZLC/
text-align: center; works with a position: absoluteelement when adding left: 0; right: 0;
text-align: center; position: absolute添加时与元素一起使用left: 0; right: 0;
