Question

我有一个网格（在我的屏幕上，2行：4个盒子和1个盒子），我想根据屏幕的宽度在屏幕上居中。无论第一行中是否有4个方框或2个方框，它都应该在屏幕中居中。

我知道我可以通过javascript实现这一点，但我的问题是 - 这在CSS中是否可以实现？

我有一些非常简单的代码和JSFiddle：

HTML

<div id="container">
    <ul>
        <li></li>
        <li></li>
        <li></li>       
        <li></li>
        <li></li>
    </ul>
</div>

CSS

*{
    margin: 0px;
    padding: 0px;
}

#container{
    width: 93%;
    margin: 0 auto;
}

ul{
    list-style-type: none;
    margin-top: 10px;
    margin-left: 10px;
}

ul li{
    border: 1px solid black;
    width: 300px;
    height: 300px;
    float: left;
    margin-right: 10px;
    margin-bottom: 10px;
}

Answer 1

Vanilla CSS解决方案，http://jsfiddle.net/MUaHz/3/：

*{
    margin: 0px;
    padding: 0px;
}

#container{
    width: 93%;
    margin: 0 auto;
    border: 1px solid #009900;
}

ul{
    list-style-type: none;
    margin-top: 10px;

    margin: 0 auto;
    border: 1px solid #000099;
    text-align: center;
}

ul li{
    border: 1px solid black;
    width: 300px;
    height: 300px;
    display: inline-block;
    margin-right: 10px;
    margin-bottom: 10px;
}

Answer 2

你可以使用这个

#container{
position: fixed; top: 50%; left: 50%; width: 93%; height: 200px;
}
ul li{
position: relative; top: -50%; left: -50%; width: 100%; 
height: 100%; background-color:red; color: white;
margin-bottom: 5px;
border: 1px solid black;
}

http://jsfiddle.net/modaloda/MUaHz/2/

请参阅此链接：Link

基于设备宽度的中心网格

2 个答案: