<style type="text/css">
body,ul,li {
padding: 0;
margin: 0; /* 好的习惯：清除内外边距，避免受默认格式的影响 */
}
ul,li {
list-style: none; /*清除列表默认格式 */
}
.demo {
width: 320px;
height: 210px;/*运用负margin进行垂直居中必须指定宽度和高度 */
border: solid 5px black;
margin: auto;/* 水平居中 */
position: absolute;/* 垂直居中：绝对定位 */
left: 50%;
top: 50%;
margin-left: -160px;
margin-top: -110px;
}
ul {
margin-right: -10px; /*文档流元素分别向左移动10px */
margin-bottom: -10px; /*文档流元素分别向上移动10px */
overflow: hidden; /* 将超出框体的内容隐藏*/
}
li {
width: 100px;
height: 100px;
background: yellow;
float: left;
margin-right: 10px;
margin-bottom: 10px;
}
</style>
<body>
<div class="demo">
<ul>
<li>子元素1</li>
<li>子元素2</li>
<li>子元素3</li>
<li>子元素4</li>
<li>子元素5</li>
<li>子元素6</li>
</ul>
</div>
</body>
