CSS常用定位方法（绝对定位、相对定位、固定定位）

最新推荐文章于 2024-08-06 10:00:00 发布

永恒之月℡

最新推荐文章于 2024-08-06 10:00:00 发布

阅读量3.8k

点赞数

分类专栏：前端文章标签： css css3 html

本文链接：https://blog.csdn.net/qq_57340195/article/details/122416402

版权

前端专栏收录该内容

7 篇文章 1 订阅

订阅专栏

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