css margin:0 auto 不起作用？_ul中的li使用magine:0 aute;没反应-CSDN博客

本文链接：https://blog.csdn.net/Adrian_Liao/article/details/104554514

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>