天天看点

fixed定位底部左右居中,absolute定位上下左右居中

移动端开发过程中,底部固定定位经常会用到,如果有时候宽度是100%的话,就不涉及左右居中的问题,反之,就要注意左右居中的问题。

代码如下:

.fixed{
	position:fixed
	bottom:0
	left:0
	right:0
	margin-left:auto
	margin-right:auto
}
           

有时候需要页面弹框,然后要求弹框上下左右居中,这个弹框一般都是定宽定高的,对他固定定位,然后left和top分别50%,再设置margin-left和margin-top的值为负的弹框宽高的一半

例如:一个弹框宽高分别为3rem和5rem

.absolute{
    position: absolute;
    width: 3rem;
    height: 5rem;
    top: 50%;
    left: 50%;
    margin-top: -2.5rem;
    margin-left: -1.5rem;
}
           

这样就能实现上下左右居中了