CSS 居中位置的项目：相对
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6626314/
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
Center an item with position: relative
提问by Flippinmonk
I've got a menu that appears on hover over an absolutely positioned div. All of the menu items have to be relatively positioned because the absolutely div will appear multiple times on a page and will appear in multiple sizes in one instance.
我有一个菜单，它出现在悬停在绝对定位的 div 上时。所有菜单项都必须相对定位，因为绝对 div 将在页面上多次出现，并且在一个实例中将以多种尺寸出现。
How would I center multiple items with position: relativeboth vertically and horizontally when I won't know the the size of the parent div?
position: relative当我不知道父 div 的大小时，如何将多个项目垂直和水平居中？
I know the position: absolutetrick with negative margins, but this situation calls for something different.
我知道position: absolute负边距的技巧，但这种情况需要一些不同的东西。
Here's the code:
这是代码：
.OuterCase {
position : absolute;
width : 100%;
height : 100%;
text-align: center;
}
.InnerItem {
width : 38px;
height : 38px;
display: inline-block;
}
I've got it to center the items horizontally; it's getting the vertical that's being a bit elusive.
我已经让它水平居中项目；它正在获得有点难以捉摸的垂直。
回答by Hexxefir
Much simpler:
更简单：
position: relative;
left: 50%;
transform: translateX(-50%);
You are now centered in your parent element. You can do that vertically too.
您现在位于父元素的中心。你也可以垂直地这样做。
回答by DADU
Alternatively, you may also use the CSS3 Flexible Box Model. It's a great way to create flexible layouts that can also be applied to center content like so:
或者，您也可以使用CSS3 弹性盒模型。这是创建灵活布局的好方法，也可以应用于中心内容，如下所示：
#parent {
-webkit-box-align:center;
-webkit-box-pack:center;
display:-webkit-box;
}
回答by spraff
If you have a relatively- (or otherwise-) positioned div you can center something inside it with margin:auto
如果您有一个相对（或以其他方式）定位的 div，您可以使用 margin:auto
Vertical centeringis a bit tricker, but possible.
垂直居中有点棘手，但可能。
回答by Matija
You can use calcto position element relative to center. For example if you want to position element 200pxright from the center .. you can do this :
您可以使用calc相对于中心定位元素。例如，如果你想200px从中心定位元素......你可以这样做：
#your_element{
position:absolute;
left: calc(50% + 200px);
}
Dont forget this
不要忘记这个
When you use signs +and -you must have one blank space between sign and number, but when you use signs *and /there is no need for blank space.
使用符号时+，-符号和数字之间必须有一个空格，但使用符号时*，/不需要空格。
回答by Pawe?
Another option is to create an extra wrapper to center the element vertically.
另一种选择是创建一个额外的包装器来垂直居中元素。
#container{
border:solid 1px #33aaff;
width:200px;
height:200px;
}
#helper{
position:relative;
height:50px;
top:50%;
border:dotted 1px #ff55aa;
}
#centered{
position:relative;
height:50px;
top:-50%;
border:solid 1px #ff55aa;
}<div id="container">
<div id="helper">
<div id="centered"></div>
</div>
<div>