以位置为中心的项目：相对答案

【问题标题】：Center an item with position: relative以位置为中心的项目：相对
【发布时间】：2011-10-01 08:43:29
【问题描述】：

我有一个菜单，它出现在一个绝对定位的 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;
}

我已经让它水平居中;它的垂直方向有点难以捉摸。

【问题讨论】：

您的 codez 将不胜感激，因为在没有他们的情况下回答您的问题有点困难。 :)
谢谢 Bazzz，我添加了代码。
您应该将您的解决方案添加为单独的答案，并接受该答案，以便每个人都知道该问题已得到解答。
我不完全确定您是否需要定位：相对。
可读性不错……从来没有见过这样的 CSS 格式……

标签： css alignment css-position center

【解决方案1】：

简单得多：

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

您现在位于父元素的中心。您也可以垂直执行此操作。

【讨论】：

【解决方案2】：

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

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

【讨论】：

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

【解决方案3】：

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

Vertical centering 有点诡计，但有可能。

【讨论】：

横向定位的最佳答案

【解决方案4】：

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

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

别忘了这个

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

【讨论】：

这正是我的项目所需要的，谢谢
它不准确，但很好的解决方案。更好的结果是如果你知道元素的宽度和高度，例如 w: 40, h: 30, 然后 left: calc(50% - 20px), right: calc(50% - 15px)。这将准确地居中元素

【解决方案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>

【讨论】：