浮窗是一種非常常見的交互設(shè)計，可以通過Css來實現(xiàn)。下面介紹幾種常見的實現(xiàn)方法。

方法一：使用position屬性

.floater{
position:fixed; /*定義浮動元素的定位類型為固定*/
top:50%;   /*距離頂部50%*/
left:50%;   /*距離左側(cè)50%*/
margin-top:-50px;   /*距離頂部-50px*/
margin-left:-100px;   /*距離左側(cè)-100px*/
}

方法二：使用transform屬性

.floater{
position:absolute;  /*定義浮動元素的定位類型為絕對*/
top:50%;   /*距離頂部50%*/
left:50%;   /*距離左側(cè)50%*/
transform:translate(-50%,-50%);  /*平移調(diào)整*/
}

方法三：使用Flex布局

.container{
display:flex;   /*將父容器設(shè)為Flex布局*/
justify-content:center;  /*排列方式為居中*/
align-items:center;  /*排列方式為居中*/
}
.floater{
margin:auto;   /*將浮動元素設(shè)為自動margin*/
}

以上就是幾種常見的添加Css浮窗的方法。大家可以根據(jù)實際需求選擇不同的方法來實現(xiàn)。