将项目居中，位置：相对

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

我已经让它水平居中项目；它的垂直度有点难以捉摸。

Answer 1

更简单：

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

您现在位于父元素的中心。你也可以垂直地这样做。

Answer 2

或者，您也可以使用 CSS3 灵活盒子模型。
这是创建灵活布局的好方法，也可以应用于中心内容，如下所示：

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

Answer 3

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

垂直居中有点复杂，但也是可能的。

Answer 4

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

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

不要忘记这一点

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

Answer 5

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

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

Answer 6

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

只要确保父母的身高大于孩子的身高即可。

Answer 7

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

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

.child{
    margin:auto;
}