css - 绘制一个宽度为 :50% in CSS? 的正方形

Question

我想在“移动”WebApp 上显示一个正方形。宽度应为屏幕尺寸的一半。在任何屏幕上。如何声明高度？

#square{
    position:absolute;
    background:black;
    width:50%;  
}

我如何将这些没有固定大小的元素居中？

非常感谢。

Answer 1

你应该能够按照这些思路做一些事情:

.sq{
    padding-bottom: 50%;
    width: 50%;
    height: 0;
    background: red;
    margin:0 auto;
}

jsFiddle example

要垂直和水平居中，尝试:

.sq{
    width: 50%;
    height: 0;
    padding-bottom: 50%;
    background: red;
    position:absolute;
    margin:auto;
    top:0;
    bottom:0;
    left:0;
    right:0;
}

jsFiddle example