margin: 0 auto的含义：
margin:0 auto 将对象设置为上下间距为0，左右自动。
可拆分：
margin:0 auto 0 auto
还可拆分为：
margin-top:0;
margin-right:auto;
margin-bottom:0;
margin-left:auto;
在使用margin: 0 auto;效果时期望内容居中，但未实现，代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<style>
*{
padding:0;
margin:0;
}
div{
display:inline-block;
height:70px;
width:90px;
margin:0 auto;
border:1px solid;
position:realative;
}
</style>
</head>
<body>
<div>
haha
</div>
</body>
</html>
效果如下：
这是因为
margin:0 auto
只在块级标签设置了宽度之后才会起作用（代码中设置高度仅为图片展示效果考虑，去掉后不影响居中效果），非块级标签不起作用。
使容器在外部布局中居中的方法：在容器的css中添加属性margin:0 auto，其应用条件为容器满足以下属性：
- 容器是块级标签或设置了display:block;
- 对容器标签设置了宽度width.
如果期望将容器中的内容在容器中实现居中，可通过对容器增加css内容
text-align: center;
以上代码只要把
display: inline-block
去掉即可，效果如下：
如果需要使用
display: inline-block
效果，可以在外层包裹块级div标签，如下所示：
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<style>
*{
padding:0;
margin:0;
}
div{
margin:0 auto;
width:180px;
font-size:0;}
div div{
font-size:10px;
display:inline-block;
width:90px;
border:1px solid;
position:realative;
}
</style>
</head>
<body>
<div>
<div>
haha
</div>
<div>
haha
</div>
<div>
</body>
</html>
效果图：
版权声明：本文为Adrian_Liao原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。