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

Posted 2023-03-05

【中文标题】以位置为中心的项目：相对

【英文标题】：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 格式……

【参考方案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>