您现在的位置是：首页 > 学无止境 > web前端web前端

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

管理员2020-03-30 14:03:24【web前端】3283人已围观

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

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

body{
    text-align:center;
}

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

div{
    width:400px;
    margin:0 auto;
}

/*3 flex 弹性布局

body{
    display:flex;
    justify-content: center;
    align-items:center;
}

/*4 table 属性

利用 display:table 的单元格属性使其子级垂直水平居中，写法如下：

div{
    display:table;
}
.son{
    display:table-cell;
    vertical-align:middle;
}
.grandSon{
    width:50%;
    margin:0 auto;
}


顶一下 （4） 赏 踩一下 （3）
小郭博客

相关文章

最新发表

标签云 更多

点击排行

站长特荐

关闭
QQ 微信 支付宝扫一扫打赏