css中的居中问题

1、内容水平居中

text-align：center

2、一行文字垂直居中

height=line-height

3、盒子水平居中

div{
    width：50px;
    margin:0 auto;
}

#### 4、子元素在父元素中垂直水平居中

1>弹性盒法

子元素宽高撑不满父元素时可用

p{
    display：flex;
    justify-content:center;(主轴)
    align-items:center;(侧轴)
}
s{
    flex:1
}

2>定位法

p{
    width：100px;
    height:50px;
    position:relative;
}
s{
    width:300px;
    margin:0 auto;
    height:30px;
    position:absolute;
    left:50%;
    top:50%;
    margin-left:300/2px;
    margin-top:30/2px;
}

3>表格法

p{
    display：table-cell;
    vertical-align:middle;
}
s{
    margin:0 auto;
}