css实现垂直水平同时居中的方法

1.父元素设置成table，子元素设置成table-cell

.father {
    display:table;
    text-align:center;
}

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

*vertical-align:middle ——只对table元素有效

---

2.利用定位 + transform

.father {
    position:relative;
}

.child {
     position:absolute;
     top:50%;//向下移动父元素高度的一半
     left:50%;//向右移动父元素宽度的一半
     transform:translate(-50%,-50%);//向左移动自身宽度的一半，向上移动自身高度的一半
}

---

3.定位 + 外边距

如果知道子元素的宽度

.father {
    position:relative;
}

.child {
     position:absolute;
     top:50%;//向下移动父元素高度的一半
     left:50%;//向右移动父元素宽度的一半
     margin-left:-(自身宽度的一半);//向左移动自身宽度的一半
     margin-top:-(自身高度的一半);//向上移动自身高度的一半
}

个人感觉2更好，不用自己计算，且适合响应式的布局

---

3.flex布局

父元素设置成flex，子元素关于主轴、侧轴居中

.father {
display: flex;
flex-direction: row; 
align-items: center;
justify-content: center;
height: 100vh;//如果要在整个窗口中间
}

---

4.对于行内元素

父元素设置垂直居中，子元素设置行高等于父盒子高度

.father {
    text-align:center
}

.child {//行内元素
     display:inline;
     position:absolute;
     lineheight:父盒子高度;
}

欢迎交流