使用position:relative将一个元素居中

Question

我有一个菜单，它会在绝对定位的div上悬停时出现。所有的菜单项都必须是相对定位，因为这个绝对div将会在页面上出现多次，并且在一个实例中将以多种大小出现。

如果我不知道父级div的大小，我该如何使多个具有position: relative属性的项目垂直和水平居中？

我知道使用负边距的position: absolute技巧，但这种情况需要另一种方法。

以下是代码：

.OuterCase { 
  position  : absolute; 
  width     : 100%;  
  height    : 100%; 
  text-align: center;
}

.InnerItem  { 
   width  : 38px;
   height : 38px;
   display: inline-block;
}

我已经将项目水平居中了，垂直居中有一些难以捉摸。

- Flippinmonk

---

非常感谢您提供代码，因为没有代码回答您的问题有些困难。 :) - Bazzz

您应将您的解决方案作为单独的答案添加，并接受该答案，以便每个人都知道这个问题已经得到了回答。 - NGLN

我不完全确定你是否需要position: relative。 - DA.

当设置位置（相对、绝对等）时，“margin: 0 auto”似乎不起作用。这里的重要技巧是“text-align:center”。它解决了我的问题。非常感谢！ - Chris

do this using right : 50% - Mohammad Mahdi KouchakYazdi

Answer 1

更简单：

position: relative; 
left: 50%;
transform: translateX(-50%);

您现在已经在父元素中居中。您也可以在垂直方向上进行居中。

- Hexxefir

---

如果元素不是第一个子元素（非绝对定位的第一个子元素），这将无法正常工作。 - Bikram Kumar

（这是在内部div上的） - Noel Evans

Answer 2

或者，您也可以使用CSS3 弹性盒模型。

这是一种非常好的创建灵活布局的方法，还可以应用于像这样居中内容：

#parent {
    -webkit-box-align:center;
    -webkit-box-pack:center;
    display:-webkit-box;
}

- DADU

---

Mozilla有自己的前缀，-moz。还有一个新的Flexbox，请参见http://css-tricks.com/old-flexbox-and-new-flexbox/。 - DADU

Answer 3

如果您有一个相对定位（或其他方式）的div，您可以使用 margin:auto 将其内部内容居中。

垂直居中比较复杂，但是也是可能实现的。请参考此处了解更多信息。

- spraff

---

最佳答案是水平定位。 - colemerrick

Answer 4

您可以使用 calc 将元素相对于中心定位。例如，如果您想将元素从中心向右定位 200px .. 您可以这样做：

#your_element{
    position:absolute;
    left: calc(50% + 200px);
}

别忘了这个

当你使用符号+和-时，符号和数字之间必须有一个空格，但是当你使用符号*和/时则不需要空格。

- Matija

---

这正是我项目所需要的，谢谢。 - bowlerae

这不是很准确，但是是个好的解决方案。更好的结果是如果你知道元素的宽度和高度，例如w: 40，h: 30，那么left: calc(50% - 20px)，right: calc(50% - 15px)。这将精确地居中元素。 - Madman

Answer 5

.parent {
    width: 100%;
    height: 30vh;    
    display: flex;
    justify-content: center;
    align-items: center;
}
.child {
    position: relative;
    height: 20vh;
    display: flex;
    justify-content: center;
    align-items: center;
  }

请确保父元素的高度大于子元素的高度。

- Abhishek Shivakumar

Answer 6

另一种选择是创建一个额外的包装器来垂直居中元素。

#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>

- Paweł

Answer 7

这里是另一个我还没有看到的简单解决方案：

.parent{
    display: flex;
    flex-direction: column;
    height: 40vh;
    width: 40vw;
}

.child{
    margin:auto;
}

- cupcake