CSS使页面内容居中的一种好用的方法

下面是一个小demo:让table居中显示

1.HTML代码

   <body>
        <div class="c1">
            <h3>用戶列表</h3>
            <table border="1px">
                <tr>
                    <td>序号</td>
                    <td>用户名</td>
                    <td>密码</td>
                    <td>真实姓名</td>
                    <td>年龄</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>xfh11</td>
                    <td>xfh11</td>
                    <td>Jeffrey</td>
                    <td>24</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>soon</td>
                    <td>soon</td>
                    <td>Ive</td>
                    <td>23</td>
                </tr>
            </table>
        </div>
    </body>

2. CSS样式如下设置

       <style>
            .c1{
                width:100%;
                display:flex;
                flex-direction:column;
                justify-content:space-around;
                align-items:center;
            }
        </style>

3. 效果展示

猜你喜欢

转载自blog.csdn.net/qq_37918817/article/details/81911280