当前位置:首页 > 学无止境 > web前端>正文

css div居中代码

2020-10-22 12:08:03 分类: web前端 阅读(2973) 评论(12)

css+div居中代码,css实现div水平垂直居中代码,div居中代码怎么写,小郭分享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;
}


标签: CSS div居中