以以下位置居中：相对 [英] Center an item with position: relative

问题描述

我有一个菜单，该菜单悬停在绝对定位的div上方。所有菜单项都必须相对放置，因为绝对div将在页面上出现多次，并在一个实例中以多种大小出现。

I've got a menu that appears on hover over an absolutely positioned div. All of the menu items have to be relatively positioned because the absolutely div will appear multiple times on a page and will appear in multiple sizes in one instance.

我如何居中当我不知道父div的大小时，多个具有 position：相对垂直和水平位置的项目？

How would I center multiple items with position: relative both vertically and horizontally when I won't know the the size of the parent div?

我知道位置：绝对的技巧具有负边距，但是这种情况要求有所不同。

I know the position: absolute trick with negative margins, but this situation calls for something different.

这里是代码：

.OuterCase { 
  position  : absolute; 
  width     : 100%;  
  height    : 100%; 
  text-align: center;
}

.InnerItem  { 
   width  : 38px;
   height : 38px;
   display: inline-block;
}

我已将其水平居中放置；

I've got it to center the items horizontally; it's getting the vertical that's being a bit elusive.

推荐答案

简单得多：

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

您现在位于父元素的中心。您也可以垂直进行。

You are now centered in your parent element. You can do that vertically too.

这篇关于以以下位置居中：相对的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！