单个div都知道用margin :XX px auto;来实现,但对于多个块级元素呢?那就把这些块级元素如div设置为display:inline-block;再把父元素设置为text-align:center;即可。text-align:center;本是用于设置父元素中的文本的,这里一旦把子块级元素设为inlin-block后一样有效。
还有一种新方法:
那就是把父元素设为display: flex; 且justify-content:center。(新属性需要新浏览器哦)
<html>
<head>
<title></title>
<style>
body{
color:#333;
font-size:12px;
display: flex;
justify-content:center
}
div{
width: 200px;
height: 200px;
}
#d1{
background: red;
}
#d2{
background: blue;
}
#d3{
background: yellow;
}
</style>
<script>
</script>
</head>
<body>
<div id='d1'></div>
<div id='d2'></div>
<div id='d3'></div>
</body>
</html>
很简单,就不上图啦。