使网页的组成工作在每一个窗口大小的css



我想把按钮放在页面高度的中间

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。

最新更新