为什么是顶级:50%的css不工作？

Question

我正在建立一个网站,我正试图垂直居中:

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

我的HTML是一个单一的 div

Answer 1

我认为这应该是有帮助的:)

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

<i>center</i>

Answer 2

要回答您的问题为什么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%);

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

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

如果您不知道父母的身高.您有两种选择:

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>

提示:如果您正在关注响应,请在浏览器调整大小时再次在JavaScript中设置高度.您可以通过在JavaScript中将高度设置为auto来获得新的自然高度,然后再次执行此过程.

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

Answer 3

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;