<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>
