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模型.这是创建灵活布局的好方法,也可以应用于中心内容,如下所示:

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

别忘了这个

使用标志时+,-标志和数字之间必须有一个空格,但是当您使用标志*并且/不需要空格时.