Html 为什么 css 中的 top:50% 不起作用？

Why is is top:50% in css not working?

提问by swenflea

I am making a website and I'm trying to vertically center:

我正在制作一个网站，我正在尝试垂直居中：

 position: absolute;
 width:1200px;
 height:600px;
 top: 50%;
 left: 50%;
 margin-left: -600px;

and my HTML is a single div

而我的 HTML 是一个单一的 div

回答by w3debugger

I think this should be helpful :)

我认为这应该会有所帮助:)

i{
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  position: absolute;
  top: 50%;
  left: 50%;
}

<i>center</i>

回答by Jomar Sevillejo

To answer your question why top: 50%is not working, when you use property topon an element, the parent of that element needs to have a static height set in place. This should be in pxor a unit other than percent. If you really need to use percent in your parent as well, then you can move on to the next parent (which is the parent of that parent) and have that one a fixed static height.

要回答为什么top: 50%不起作用的问题，当您top在元素上使用属性时，该元素的父元素需要设置一个静态高度。这应该是px百分比或百分比以外的单位。如果你真的需要在你的父级中使用百分比，那么你可以移动到下一个父级（它是该父级的父级）并使其具有固定的静态高度。

To vertically centering anything. I prefer to use this method

垂直居中任何东西。我更喜欢使用这种方法

The use of CSS transformsince you don't have to know what the width of height your element has.

使用 CSS，transform因为您不必知道元素的高度宽度是多少。

position: relative;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);

Don't forget to add browser/vendor prefixes.

不要忘记添加浏览器/供应商前缀。

You can refer here for vendor prefixes.

您可以在此处参考供应商前缀。

---

---

If you don't know the height of your parent. You have two options:

如果你不知道你父母的身高。您有两个选择：

1. Using JavaScript take the natural height of the parent element and then set the height property of that parent element to the value you just took. You can use this method when the height of the parent element is caused by another child element that is sibling to the element you are centering.

1. 使用 JavaScript 获取父元素的自然高度，然后将该父元素的 height 属性设置为您刚刚获取的值。当父元素的高度由与您居中的元素同级的另一个子元素引起时，您可以使用此方法。

$('.parent').height( $(this).height() );

.parent {
  /* Unkown height */
}

.child {
  /* Create columns */
  width: 50%;
  float: left;
}

.child-1 {
  position: relative;
  top: 50%;
  text-align: center;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- Example Start -->
<div class="parent">
  <div class="child child-1">
    Lorem ipsum
  </div>  
  <div class="child child-2">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
</div>

Tip: If you are taking responsive into concern, just set height again in JavaScript on browser resize. You can get the new natural height by setting height to auto in JavaScript and do the process again.

提示：如果您考虑响应式，只需在浏览器调整大小时在 JavaScript 中再次设置高度。您可以通过在 JavaScript 中将 height 设置为 auto 来获得新的自然高度，然后再次执行此过程。

1. You can scratch the ideas above and use centering with display: tableinstead. CSS-Tricks has a very good example here.

2. 你可以抓住上面的想法并使用居中display: table代替。CSS-Tricks 这里有一个很好的例子。

回答by kba

The CSS property topworks exactly as left. It pushesthe div from that direction. When you write top:50%, the divwill be pushed down 50% from the top. You want it to be centered vertically, so you need to counter this by pulling it back up. This can be done using margin-top: -300pxjust like you used margin-left: -600pxto pull it left.

CSS 属性的top工作原理与left. 它从那个方向推动div。写入时top:50%，div将从顶部向下推 50%。您希望它垂直居中，因此您需要通过将其拉回来解决此问题。这是可以做到用margin-top: -300px就像你使用margin-left: -600px来把它留下。

position: absolute;
width: 1200px;
height: 600px;
top: 50%;
margin-top: -300px;
left: 50%;
margin-left: -600px;

回答by lukiffer

top:50%;works fine, but wont "center" the item, it will place it's top edge 50% of the page's height from the top. Similarly to how you have margin-left:-600px;you should also add margin-top:-300px;

top:50%;工作正常，但不会“居中”该项目，它会将其顶部边缘放置在距离顶部 50% 的页面高度处。与您拥有的方式类似，您还margin-left:-600px;应该添加margin-top:-300px;

回答by tolga

You can use

您可以使用

calc(%50 - (items_height/2));

to center.

到中心。

回答by Jared Farrish

I believe this may somewhat mimic the answer Kristian gave, but here's my two cents, which includes using percentages and also demonstrates one inside another:

我相信这可能有点模仿 Kristian 给出的答案，但这是我的两分钱，其中包括使用百分比并在另一个内部演示：

#parent {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120px;
    height: 60px;
    margin: -60px 0 0 -30px;
    background: blue;
}
#center {
    position: absolute;
    width: 50%;
    height: 50%;
    top: 50%;
    left: 50%;
    margin: -12.5% 0 0 -25%;
    background: green;
}

http://jsfiddle.net/userdude/MYD27/

http://jsfiddle.net/userdude/MYD27/

EDIT

编辑

Looking at it further, I think you might run into issues if you're trying to do this with an element not container within a positioned element. For instance:

进一步看，我认为如果您尝试使用元素而不是定位元素中的容器来执行此操作，您可能会遇到问题。例如：

Full View| Code View

全视图| 代码视图

I don't think works the way you intended. When I add position: relative(or alternatively position: absolute), it does work I think as you intended:

我不认为你想要的方式工作。当我添加position: relative（或替代position: absolute）时，它确实按您的意图工作：

Full View| Code View

全视图| 代码视图

回答by o.v.

I'd like to take this opportunity to blatantly self-promote my answer to another question here on SO:)

我想借此机会公然自我宣传我对 SO 上另一个问题的回答:)

That being said, css "top" property gets correctly calculated based on the container element's height - effectively rendering the target element below the midline. What this means is the element needs to be pushed half-way up as explained in the linked question.

话虽如此，css“top”属性根据容器元素的高度正确计算 - 有效地将目标元素呈现在中线下方。这意味着元素需要按链接问题中的说明推到一半。

Unfortunately such a seemingly straightforward task cannot be accomplished by adjusting top margin etc. without using absolute pixel-based values (+1 for Kristian Antonsen's answer) - one would imagine setting margin-top to "-50%" would mean just that, but according to css spec, margin values even on the vertical axis are calculated as a percentage always relative to the width of the containing block

不幸的是，如果不使用基于像素的绝对值（Kristian Antonsen的答案为 +1），则无法通过调整顶部边距等来完成这样一项看似简单的任务- 人们会想象将边距顶部设置为“-50%”就意味着，但根据 css 规范，即使在垂直轴上的边距值也计算为始终相对于包含块的宽度的百分比