css的水平垂直居中

css水平垂直居中

文本的水平垂直居中：

<div class="text">center</div>

文本的水平居中：

text-align:center;

文本的垂直居中：

• 無hight

padding:10px;

• 有hight

line-height:height;

line-height--文本的行高

1. normal

2. inherit

3. percent(百分比) ---line-height = font-size(父元素的) * 150%

4. px(像素值)

5. 純數字(1.5) --line-height = font-size(自身的) * 1.5

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

盒子的水平垂直居中：

<div class="wrap"><div class="item"></div></div>

• position + margin

.wrap{position:relative;}
.item{
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    margin:auto;
}
或者
.item{
    position:absolute;
    top:50%;
    left:50%;
    margin-top: -(height/2);
    margin-left: -(height/2);
}
或者{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
}

• table

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

• flex

.wrap{
    display:flex;
    justify-content:center;
    align-items:center;
}
或者
.wrap{
    display:flex;
}
.item{margin:auto;}