9.如何让一个div 上下左右居中?【CS

最新推荐文章于 2024-10-29 16:17:45 发布

weixin_30483495

最新推荐文章于 2024-10-29 16:17:45 发布

阅读量1k

点赞数 2

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/Caixingmin/p/11250115.html

本文介绍了三种使用CSS实现元素在页面中水平垂直居中的方法：利用绝对定位和transform属性、四边距自动和margin属性，以及绝对定位配合margin负值。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

方法1：【绝对定位50%-本身50%】

position:absolute; left:50%; top:50%;

transform: translate(-50%,-50%);

.div1{ 
          width:400px; 
          height:400px;
          border:#CCC 1px solid; 
          background:#99f; 
          position:absolute; left:50%; top:50%;/*绝对定位*/
          transform: translate(-50%,-50%); 
/*translate(x,y) 括号的百分比数据，会以本身的长宽做参考，比如，本身的长为100px，高为100px. 那填(50%,50%)就是向右，向下移动50px，添加负号就是向着相反的方向移动*/
} 

<div class="div1"></div>

方法2：不太懂

 .div2{ 
            width:400px;
            height:400px; 
            border:#CCC 1px solid; 
            background:#99f; 
            position: absolute;
            left:0; 
            top: 0; 
            bottom: 0;
            right: 0;
            margin: auto; 
} 
<div class="div2"></div>

方法3：【绝对定位50%-本身50%】

 .div3{
　　　　width:400px; 
　　　　height:400px; 
　　　　border:#CCC 1px solid;
　　　　background:#9f9; 
　　　　position: absolute; 
　　　　left: 50%; 
　　　　top:50%; 
　　　　margin-left:-200px; 
　　　　margin-top: -200px; 
} 
<div class="div3"></div>

转载于:https://www.cnblogs.com/Caixingmin/p/11250115.html