使用位置将项目居中:相对

Question

我有一个菜单，出现在悬停在一个绝对定位的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 Flexible Box Model。这是一种创建灵活布局的好方法，也可以应用于中心内容，如下所示：

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

Answer 3

如果有一个相对位置(或其他位置)的div，则可以使用margin:auto将其中的内容居中

Vertical centering有点棘手，但也是有可能的。