css 居中

最新推荐文章于 2024-10-14 09:19:01 发布

weixin_34007020

最新推荐文章于 2024-10-14 09:19:01 发布

阅读量58

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/fengyouqi/p/8085768.html

本文介绍了几种使用CSS实现元素居中的方法，包括绝对定位元素居中、一般块级元素居中及利用Flex布局进行居中等。这些技巧适用于不同的场景需求。

        /* 绝对定位元素居中：  */
        .loading-img {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }

        /* 一般块儿级元素居中：  */
        .div_container {
            width: 500px;
            margin: 0 auto;
        }

        /* 块儿级元素内部元素居中（flax布局，水平居中为例）：  */
        li {
            width: 100px;
            height: 100px;
            display: inline-block;
            border: 10px solid red;
            margin: 20px;
        }

        ul {
            width: 100%;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: center;
            padding-start: 0;
            /*默认padding-start有40px*/
        }

        /* left:0; right:0; top:0; bottom:0; margin：auto;会使child居中，如果child没有宽高，则会继承父集的宽高，适合body 内的遮罩 */
        .child {
            width: 50px;
            height: 50px;
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
        }