浮窗布局技巧-CSDN博客

本文链接：https://blog.csdn.net/zhwangchao/article/details/107815609

1、浮窗CSS自适应宽高的对齐方式，此两种方式可以不固定宽高

// 第一种方式
.fixedMin{
    position: fixed;
	z-index: 5;
	width: 100vw;
	height: 100vh;
	background: rgba(0,0,0,.5);
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	display: flex;
	justify-content: center;
	align-items: center;
    .minContent{
        background-color: #FFFFFF;
		width: 100px; // 宽度
		height: 300px;// 高度
    }
}

// 第二种方式
.fixedMin{
    position: fixed;
	z-index: 5;
	width: 100vw;
	height: 100vh;
	background: rgba(0,0,0,.5);
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
    .minContent{
        background-color: #FFFFFF;
		width: 100px; // 宽度
		height: 300px;// 高度
        position:absolute;
        z-index:6;
        top:50%;
        left:50%;
        transform: translate(-50%,-50%);
    }
}

2、浮窗固定宽高居中对齐方式

.fixedMin{
    position: fixed;
	z-index: 5;
	width: 100vw;
	height: 100vh;
	background: rgba(0,0,0,.5);
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
    .minContent{
        background-color: #FFFFFF;
		width: 100px; // 宽度
		height: 300px;// 高度
        position:absolute;
        z-index:6;
        top:50%;
        left:50%;
        margin-left:-50px;
        margin-top:-150px;
    }
}

END.

CSS居中对齐方式