聊聊css居中的那些事

长久以来 css的水平居中，垂直居中，水平垂直居中我都比较混乱每次都是试对了就行，今天好好总结一下

1.行内元素水平居中

<style>
    div{
        background-color:cadetblue;
        width: 500px;
        text-align: center;
    }
</style>
<body>
    <div>
        我是文本，我只相对于父元素水平居中
    </div>
</body>

2.块状元素的水平居中，分为：定宽块状元素和不定宽块状元素

定宽块状元素水平居中显示

　　最常使用的margin 方式 margin： auto auto为垂直水平居中

<style>
    div{
        background-color:cadetblue;
        width: 500px;
        /* margin-left和margin-right设置auto，margin-top和margin-bottom可以不为0 */
        margin: 0 auto;
    }
</style>
<body>
    <div>
        我是定宽块状元素，我想水平居中显示
    </div>
</body>

使用flex布局实现水平垂直居中

<style> 
    .wrapper {
        width: 300px;
        height: 300px;
        border: 1px solid #ccc;
    }
    .flex-center {
        display: flex;
        /* 水平居中 */
        justify-content: center;
        /* 垂直居中 */
        align-items: center;
    }
</style>
<body>
    <div class="wrapper flex-center">
        <div>
            我要居中
        </div>
    </div>  
</body>：

不定宽块状元素水平居中

　　1.给要居中的块状元素外一个table标签，然后让table标签居中，个人不推荐这种方式

<style>
    table{
        background-color: yellow;
        margin: 0 auto;
    }
</style>
<body>
   
<table>
    <tbody>
      <tr><td><div>
     设置我所在的div容器水平居中 
   </div>
   </td></tr>
    </tbody>
   </table

2.将不定宽块状元素display为内联元素

<style>
    ul{
        background-color:red;
        display: inline;
        text-align: center;
       
    }
</style>
<body>
    
      <ul>
          <li>1</li>
          <li>2</li>
          <li>3</li>
      </ul>
</body>

效果（没有弄清楚为什么左上角还有显示红色）