我想把按钮放在页面高度的中间
i tried this:
: 50%;
但是它不起作用,我发现这里必须push top margin
我发现一个代码:margin-top: -300px;
我可以使用像margin-top: -width:50%这样的东西吗?这意味着按钮将在中间,我该如何编码呢?
如何100%居中,然后把按钮放在它下面所以第一个是50%第二个是60%即使我调整了窗口的大小
您可以简单地通过将其放置在父元素中的绝对位置来实现这一点,然后您可以通过翻译按钮来居中。
HTML<body>
<div class="container">
<button>Centered button</button>
</div>
</body>
CSS html, body {
height: 100%;
margin: 0;
}
.container {
position: relative;
height: 100%;
}
button {
position: absolute;
top: 50%; //50% from top
left: 50%; //50% from left
//translate it so 50% from the width and heigth of the button will be subtracted thus centering the button
transform: translate(-50%, -50%);
}
在这里工作的js提琴。不要忘记添加供应商前缀!
另一个选项是flexbox。