css居中方法归纳(二)

大话元素居中


身为一名前端开发者,居中永远是绕不去的一个问题,如果不能有完整的方式归类,每次百度难免费时,并且显的咱们多low啊,居中都要百度,至少为了咱们滴面子,咱也要把它学好,接下来一起来看看吧

水平居中

水平居中方案一:

父级加text-align 子级inline-block

 .father{
            width: 100%;
            height: 200px;
            background: #ccc;
            text-align: center;
        }
 .son{
            display: inline-block;
            width: 200px;
            height: 200px;
            background: red;
        }

要知道,父级元素中的text-align 最初为文本内容设置对齐方式,那么为什么其会对div起作用呢?

注意,我们对子级设置了display:inline-block属性,这时的div拥有了内联元素(inline元素)的特点

优点:浏览器兼容较好

缺点:text-align具有继承性,导致子元素中的文本也是居中显示的,如果不想对齐,需要在子级中重新修改


水平居中方案二:

子级display table/block + margin 0 auto

.father{
            width: 100%;
            height: 200px;
            background: #ccc;
        }
 .son{
            display: table;
            margin:0 auto;
            width: 200px;
            height: 200px;
            background: red;
        }

auto 会根据浏览器自动分配,如果自动分配则浏览器会将左右等分。

优点:只需要对子级进行设置就可以实现水平居中效果,无需操作父级

缺点:如果子级元素脱离文档流,会导致margin属性值无效(即被设置浮动float和绝对定位absolute及固定fixed定位)

​ 注意relative是不会脱离文档流的


水平居中方案三:

父级 relative 子级 absolute + left + transform

.father{
        position:relative;
        width: 100%;
        height: 200px;
        background: #ccc;
}
.son{
        position:absolute;
        left:50%;
        transform:transformX(-50%)
        width:200px;
        height:200px;
}

优点:无论父级元素是否脱离文档流,都不影响子级的水平居中效果

缺点:transform是css3新增属性,浏览器兼容性不好(就是IE6~9那几个杀千刀的!)


垂直居中

垂直居中方案一:

table-cell + vertical-align 均对父级设置

 .father{
            display: table-cell;
            vertical-align: middle;
            width: 200px;
            height: 600px;
            background: #ccc;
           
        }
        .son{
            width: 200px;
            height: 100px;
            background: red;
        }

vertical-align原设置文本内容垂直方向对齐方式 但应对文本起作用,对盒子无效

table设置当前元素为

元素

table-cell设置当前元素为

元素

设置完这个属性,子级中的元素就像在单元格中的内容,因此vertical就有效了

优点:浏览器兼容性较好

缺点:父级元素中的文本内容也会垂直居中


垂直居中方案二:

absolute + transform

 .father{
            
            position: relative;
            width: 800px;
            height: 600px;
            background: #ccc;
           
        }
        .son{
            
           
            
            width: 200px;
            height: 100px;
            background: red;
        }

优点:无论父级元素是否脱离文档流,都不影响子级的水平居中效果

缺点:transform是css3新增属性,浏览器兼容性不好


整体居中

整体居中方案一:

 .father{
            
            display: table-cell;
            vertical-align: middle;
            width: 800px;
            height: 600px;
            background: #ccc;
           
        }
        .son{
            
            display: table;
            margin: 0 auto;
            width: 200px;
            height: 100px;
            background: red;
        }

缺点:子级进行居中,但要对父级样式进行控制

​ table代表

table-cell代表
一般都是在中定义的,在这里反过来,不符合HTML的语义化

​ 可以将display table改为 block

整体居中方案二:

 .father{
            
            position: relative;
           
            width: 800px;
            height: 600px;
            background: #ccc;
           
        }
        .son{
            
            position: absolute;
            top: 50%;
            left: 50%;

            transform: translate(-50% , -50%);
            
            width: 200px;
            height: 100px;
            background: red;
        }

常规,没什么好说的。

缺点依然是兼容性的问题

你可能感兴趣的:(css居中方法归纳(二))