CSS常用定位方法
1、绝对定位到屏幕中间
/*定位标签，不可定位文字*/ .DW{ position:absolute; top:50%; /*可以通过改变top的百分比，来改变上下的位置*/ left:50%; /*可以通过改变left的百分比，来改变左右的位置*/ transform:translate(-50%,-50%); /* 可设置其它样式，如宽、高、颜色等等 */ }
2、相对定位定位到屏幕中间
/*可以定位标签和文字*/ /*是把标签里的东西居中，所以要嵌套使用*/ .DW{ display:flex; justify-content:center; align-items:center; }
如：下实例
<!----> <html> <head> <style> .DW{ display:flex; justify-content:center; align-items:center; width: 400px; height:300px; background-color:green; /*背景颜色绿色*/ } .DW2{ display:flex; justify-content:center; align-items:center; width:600px; height:300px; background-color:red; /*背景颜色红色*/ } </style> </head> <body> <div class="DW">我文字可以居中了，嘿嘿嘿！</div> <!--文字居中--> <div class="DW2"> <div style="background-color:green;width:100px;height:100px"> 装我的盒子居中了，我文字没有居中，嘤嘤嘤！ </div> </div> </body> </html>
效果图如下：
3、固定定位法居中(即使滚动滚动条它也不改变位置)
/*可以根据自己需求调整参数*/ .DW{ position: fixed; /* 绝对定位，不管滚动条上下滚动都在相应的位置*/ width:20%; /*设置标签的宽*/ height: 20%; /*设置标签的高*/ background-color: aquamarine; /*设标签背景色*/ margin-top:-10%; /*减去的是标签高的一半*/ margin-left: -10%; /*减去的是标签宽的一半*/ bottom: 50%; /*标签相对底边的一半 ，可以变成：top*/ left: 50%; /*标签相对左边的一半 可以变成：right*/ }
