使网页组合适用于每个窗口大小的 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的主要内容，如果未能解决你的问题，请参考以下文章