Question

我正在使用此处描述的方法：http://davidwalsh.name/css-vertical-center垂直居中div。

我的代码如下所示：

.center-helper {

  position: relative;
  top: 50%;
  left: 0;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
}

此方法在桌面上运行正常，但在iOS设备上运行不正常。但是，如果我将位置更改为绝对位置，它将在iOS Safari上运行。什么解释了这种行为以及哪种方式适合垂直居中div？

Answer 1

我今天想出了这个问题的答案！它也很简单。试试这个！

.center-helper {

  position:relative;
  top:50%;
  left:0;
  -webkit-transform:translateY(-50%);
  -moz-transform:translateY(-50%);
  -ms-transform:translateY(-50%);
  -o-transform:translateY(-50%);
  transform:translateY(-50%);
  vertical-align:top;
}

这里的关键是 vertical-align：top; 这不会导致其他浏览器出现任何问题，并且似乎修复了translateY在移动版Safari上的工作方式！我希望这会有所帮助。

对于通常垂直居中的一切，我把它完全放在这样。

.vertical-align{
    position:relative;
    top:50%;
    -webkit-transform:translateY(-50%);
    -ms-transform:translateY(-50%);
    transform:translateY(-50%);
    vertical-align:top;
}

然后你就可以在任何HTML元素上将它调用到垂直居中它甚至在Mobile Safari上！＆安培;移动Chrome。

Answer 2

问题似乎是使用％值并不总是在iOS设备中有效。

我没有使用％值，而是使用了视点值，它就像魅力一样。

我的实施将是

 <div class="checkbox-list margin-auto">
    <label class="">Compare to Last Year</label><br>
    <label class="normal" for="01">
       <input id="01" type="checkbox" name="VIEW" value="01"> Retail units
    </label>
    <label class="normal" for="02">
          <input id="02" type="checkbox" name="VIEW" value="02">  Retail Dollars
    </label>
    <label class="normal" for="03">
          <input id="03" type="checkbox" name="VIEW" value="03">  GP Dollars
    </label>
    <label class="normal" for="04">
          <input id="04" type="checkbox" name="VIEW" value="04">  GP Percent
    </label>
</div>

  $("input[name='VIEW']:checkbox").change(function() {
    if($(this).is(':checked')) {  
         $("input[name='VIEW']:checkbox").prop("checked", false);
     $("input[name='VIEW']:checkbox").parent('.normal').removeClass("checked");
         $(this).prop("checked", true);
         $(this).parent('.normal').addClass('checked');
    }
    else{
         $("input[name='VIEW']").prop("checked", false);
         $("input[name='VIEW']").parent('.normal').removeClass('checked');
    }    
});

Answer 3

您可以像这样使用计算

top: calc(50%-half of the div)

如果div高度为200px

top: calc(50%-100px);

为什么使用translateY将div居中在桌面浏览器上，而不是在iOS Safari上？

3 个答案: