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

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

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

---

我的HTML是一个单独的

div

CSS属性

top

的工作原理与

left

完全相同。它从那个方向推动div。写入

top:50%

时，

div

将从顶部向下推50%。你想让它垂直居中，所以你需要通过把它拉回来来对抗它。这可以使用

margin top:-300px

完成，就像您使用

margin left:-600px

将其向左拉一样

---

top:50%工作正常，但不会“居中”项目，它会将其顶部边缘放置在页面顶部高度的50%。类似于您的
剩余余量：-600px您还应添加
页边距顶部：-300px
我相信这可能有点像克里斯蒂安给出的答案，但这是我的两分钱，其中包括使用百分比，还演示了一个百分比与另一个百分比之间的关系：

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


编辑

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

|

我认为这不是你想要的。当我添加
position:relative
（或者
position:absolute
）时，我认为它确实起作用了：

|我想借此机会公开自我宣传：）

这就是说，css“top”属性根据容器元素的高度得到正确计算——有效地将目标元素渲染到中线以下。这意味着元素需要向上推一半，如链接问题中所述

不幸的是，如果不使用基于绝对像素的值（+1代表克里斯蒂安·安东森的答案），那么通过调整顶部边距等方法无法完成这样一项看似简单的任务-可以想象，将顶部边距设置为“-50%”将意味着这一点，但根据css规范，即使是垂直轴上的边距值也按您可以使用的方式计算

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

居中
 我认为这应该有帮助：）


i{
-webkit转换：翻译（-50%，-50%）；
转换：翻译（-50%，-50%）；
位置：绝对位置；
最高：50%；
左：50%；
}
center
要回答您的问题，为什么
top:50%
不起作用，在元素上使用属性
top
时，该元素的父元素需要设置一个静态高度。该单位应为
px
或百分比以外的单位。如果您真的需要在父级中也使用百分比，则可以移动到下一个父级（即该父级的父级），并使该父级具有固定的静态高度

使任何东西垂直居中

使用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%);

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



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

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

$（'.parent'）.height（$（this.height（））
.parent{
/*未知高度*/
}
.孩子{
/*创建列*/
宽度：50%；
浮动：左；
}
.child-1{
位置：相对位置；
最高：50%；
文本对齐：居中；
-webkit转换：translateY（-50%）；
-莫兹变换：translateY（-50%）；
-ms转换：translateY（-50%）；
-o-变换：translateY（-50%）；
转化：translateY（-50%）；
}

乱数假文
知识是一种美德，是一种美德，是一种美德，是一种美德。但是，在最低限度上，我们需要一个实验室来进行日常工作。两人或两人在一个无教区的房间里互相指责。除偶尔因疏忽而死亡外，不得因疏忽而导致动物死亡。
很抱歉，这不起作用。。。它只是把它贴在页面顶部-300px。。。我需要在外分区或内分区上设置任何样式吗？您在特定浏览器中是否遇到过这种情况？只要是position:absolute，包含元素上的样式就不重要，除非您使用的选择器更具体，并且覆盖了上面列出的样式。Doing
left:50%然后
左边距：-600px没有多大意义，因为你只是在用另一个元素来取消一个。swenflea：我用父元素的
位置的信息编辑了我的问题。实际上，你能更具体地回答这个问题吗？是否希望您的DIV位于页面的中心。我的意思是精确的中心…？@JaredFarrish它使div保持在正中，然而，我更喜欢使用宽度：calc（50%-600px）@Swenflea，你在过去七年里解决过这个问题吗？如果是的话，提供的任何答案都是好的吗？如果没有，请发布您的解决方案好吗？+1解释父分区中的
位置：相对的
（或绝对的）。这就是它对我有效的原因。这适用于固定高度元素。对于可变高度，请使用。这是IMO的最佳解决方案。谢谢！我一直在寻找这个永远！如果你的父母没有静态身高，这是行不通的，除非你有
height:100%。如果你需要更多信息，你可以在下面查看我的答案。此外，在某些情况下，您并不需要绝对位置。这可以在
位置工作：相对
适用于那些担心选择此解决方案而需要使用它来保持posi的人
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%);