CSS水平垂直居中

CSS水平垂直居中可以按着子元素属于行内元素和块级元素来分类,从而更好得理解。下面以类box为子元素,类parent为父元素进行分析。如果知道子元素宽高的话,子元素的宽高为100px。

一、行内元素

1、知子元素高

.box{
    text-align:center; /*水平居中*/
    height:100px;  /*垂直居中  */
    line-height:100px;
}


2、不知子元素高

不知子元素高度的情况下,有两种方案。第一种是通过display来处理,如下:

.box{
    text-align:center; 
    display:table-cell;  
    vertical-align:middle;
}

另外一种情况是通过伪元素来处理

.box:after {
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}


二、块级元素

1、知子元素高

(1) absolute+负margin

.parent {
    position: relative;
}
.box {
    position: absolute;;
    top: 50%;
    left: 50%;
    margin-left: -50px;
    margin-top: -50px;
}

(2) absolute+calc

.parent {
    position: relative;
}
.box {
    position: absolute;;
    top: calc(50% - 50px);
    left: calc(50% - 50px);
}


2、不知子元素宽高

(1) absolute+margin auto

.parent {
    position: relative;
}
.box {
    position: absolute;;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

(2) absolute+transform

.parent {
    position: relative;
}
.box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

(3) table-cell

.parent {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}
.box {
    display: inline-block;
}

(4) flex

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

评论(1)

受教受教~

陈姒攸

2020-06-19 20:25:21

评论