CSS中心项，位置：相对;

Question

我有一个问题，你在那里的CSS大师！

我有一个菜单，悬停在一个绝对定位的div上。所有菜单项都必须相对定位，因为绝对div将在页面上多次出现，并在一个实例中以多种尺寸显示。

当我不知道父div的大小时，如何将“position：relative”垂直和水平居中的多个项目中心？

我知道具有负边距的'位置：绝对'技巧，但这种情况需要一些不同的东西。

你的帮助将非常感谢。

编辑：

这是代码：

.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 Flexible Box Model。这是创建灵活布局的好方法，也可以应用于中心内容，如下所示：

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

Answer 3

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

Vertical centering有点招数，但可能。

Answer 4

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

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

Dont forget this

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

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>