7种css设置div居中的方法,完美解决各种居中问题

/*1 父级使用text-align:center属性使所有子文本内容水平居中*/

1
2
3
body{
    text-align:center;
}

/*2 利用margin属性,上外边距为0,左右自适应,需要指定宽度,这是最普遍的一种水平居中方式*/

1
2
3
4
div{
    width:400px;
    margin:0 auto;
}

/*3 父级div设置H5新属性flex弹性布局(浏览器需要支持H5)使所有子内容垂直水平居中*/

1
2
3
4
5
body{
    display:flex;
    justify-content: center;
    align-items:center;
}

/*4 利用display:table的单元格属性使其子级垂直水平居中*/

1
2
3
4
5
6
7
8
9
10
11
div{
    display:table;
}
.son{
    display:table-cell;
    vertical-align:middle;
}
.grandSon{
    width:50%;
    margin:0 auto;
}
/*5 利用position属性,上下左右均为0(脱离文档流,并使其填充父级所有可用空间)
然后给div设置宽高,防止其占用父级所有可用空间,
再设置margin:auto(等同于margin-top:0;margin-bottom:0)使浏览器重新计算外边距
以达到垂直水平居中效果*/
1
2
3
4
5
6
7
div{
    position:absolute;
    top:0;right:0;bottom:0;left:0;
    width:400px;
    height:300px;
    margin:auto;
}
/*6 利用position属性分别向上和左偏移50%的距离
然后利用translate属性分别向x轴y轴偏移-50%,达到垂直水平居中效果
这种方式适合在移动端或者没有固定宽高的情况下使用*/
1
2
3
4
5
6
div{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
}
/*7 利用position属性分别向上和左偏移50%的距离
然后利用margin属性,分别向上偏移负的div总宽度的一半,向左偏移负的div总高度的一半
这种方式适合已经设置了div的宽高并且需要定位垂直水平居中的情况*/
1
2
3
4
5
6
7
8
div{
    width:400px;
    height:300px;
    position:absolute;
    top:50%;
    left:50%;
    margin:-200px 0 0 -150px;
}

发布评论
还没有评论,快来抢沙发吧!