css div居中代码

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;
}