关于盒子定位在y轴的三分之一的位置上

Question

让一个盒子固定定位在可视高度内的三分之一的位置上，（不管屏幕高度多大，都在Y轴的三分之一的位置上）能用css快速实现吗？

Answer 1

定宽高情况

.box{
  width: 200px;
  height: 200px;
  position: absolute;
  top: 33.33%;
  margin-top: -100px;
}

不定高情况

.parent{
    position: relative;
}
.child{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

其他布局，看参考
https://segmentfault.com/a/11...

Answer 2

使用vh这个单位是否可以帮到你呢
vh:Equal to 1% of the height of the viewport's initial containing block.
33.3vh: 三分之一高度

Answer 3

不定高度，浏览器好

<style>
            .box{
                position: fixed;
                top: 33.3%;
                transform: translateY(-50%);
                -webkit-transform: translateY(-50%);
            }
</style>
    <div class="box"></div

定高度，要兼容

.box{
                position: fixed;
                top: 33.3%;
                margin-top: -50px; /*margin-top:负的高度的一半*/
                height: 100px;
            }
<div class="box"></div>