CSS 居中问题的解决

水平居中

1. 利用块级元素撑满父级元素的特点，设置子元素的margin:0 auto;平分左右空间
2. 使用绝对定位：position:absolute; left:50%;
3. 使用flex，父元素:display:flex;子元素：justify-content:center;

垂直居中

1. 行内单行文本垂直居中：父元素高度确定，子元素的line-height等于父元素的height；

div{
    
    
    height: 50px;
    background: rgb(117, 54, 54);
}
div p{
    
    
    line-height: 50px;
}

2. 父元素有高度，使用相对定位position:relative

div{
    
    
    height: 50px;
    background: rgb(117, 54, 54);
}
div p{
    
    
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

3. 使用flex，父元素加入 display: flex;align-items: center;

div{
    
    
    display: flex;
    align-items: center;
}

水平垂直居中

1. 使用transform的translate()

div{
    
    
    height: 100px;
    position: relative;
    background: rgb(117, 54, 54);
}
div p{
    
    
    position:absolute;
    background: rgb(248, 245, 245);
    margin: 0;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

2. 使用flex

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