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*/
}