使网页组合适用于每个窗口大小的 css

Posted

技术标签:

【中文标题】使网页组合适用于每个窗口大小的 css【英文标题】:make the webpage composition working on every window size css 【发布时间】:2016-01-15 18:36:04 【问题描述】:

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

我试过这个:

顶部:50%;

但我在这里发现它不起作用,必须推动上边距

我找到了一个代码:margin-top: -300px;

我可以使用margin-top : -width:50% 这样的东西吗?这意味着按钮将在中间,我该如何编码?

如何将其 100% 居中,然后将按钮放在其下方,这样即使我调整窗口大小,第一个为 50%,第二个为 60%

【问题讨论】:

【参考方案1】:

您可以简单地通过将其绝对定位在其父元素中来做到这一点,然后您可以通过翻译它来使按钮居中。

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 小提琴here。不要忘记添加供应商前缀!

另一个选项是 flexbox。你可以找到更多关于 flexbox 居中的信息here。

【讨论】:

以上是关于使网页组合适用于每个窗口大小的 css的主要内容,如果未能解决你的问题,请参考以下文章