想要实现一个div在页面居中显示,然后无从下手,面向百度了解了一下大佬们的方法,这才一脸醒悟:
方法一:
使div绝对定位,然后left与top各设置50%,再设置margin-top为高度的负一半值,margin-left为宽度的负一半值即可
div{
width: 300px;
height: 400px;
border: solid 1px black;
position: absolute;
left: 50%;
top: 50%;
margin: -200px 0 0 -150px;
text-align: center;
}
方法二:
同样的使div绝对定位,left和top也是各设置50%,然后设置transform属性的translate(-50%,-50%)即可,这里需要注意的是transform存在一个兼容性问题,需要加上浏览器前缀,这点很让人痛苦了。
div{
width: 300px;
height: 400px;
border: solid 1px black;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
text-align: center;
}
方法三:
通过弹性布局或者网格布局实现元素居中显示
.father{
width:100%;
height:100%;
display:flex;
justify-content:center;
align-items:center
}