元素水平、垂直居中显示

1.先将元素左上角顶点定位于文档中心点,然后向左,上移动自身宽、高的一半
.class{
width:300px;
height:20px;
top: 50%;
left: 50%;
margin-left: -150px;
margin-top: -10px;
}
2.绝对定位?,然后利用margin
.class{
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
3.css中transform属性
.class{
transform: translateX(-50%); 让div 沿X轴平移自身高度的一半
transform: translateY(-50%); 让div 沿Y轴平移自身高度的一半
}

猜你喜欢

转载自blog.csdn.net/weixin_43322208/article/details/83896928