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:父盒子高度;
}
欢迎交流