使网页组合适用于每个窗口大小的 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】：您可以简单地通过将其绝对定位在其父元素中来做到这一点，然后您可以通过翻译它来使按钮居中。
<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的主要内容，如果未能解决你的问题，请参考以下文章
DW设计网页如何使DIV能自适应窗口大小居中显示，并且兼容IE、火狐、谷歌、opera等浏览器？