绝对定位元素的水平垂直居中的方法

2022-05-25 分类：网站建设

1.css实现居中

缺点：需要提前知道元素的宽度和高度。

 1 <!doctype html> 
 2 <html lang="en"> 
 3 <head> 
 4     <meta charset="UTF-8"> 
 5     <title>Document</title> 
 6     <style> 
 7         .box{ 
 8             width: 600px;  
 9             height: 400px; 
10             position: absolute;  
11             left: 50%; top: 50%; 
12             border:1px solid #000; 
13             background:red; 
14             margin-top: -200px;    /* 高度的一半 */ 
15             margin-left: -300px;    /* 宽度的一半 */ 
16         } 
17     </style> 
18 </head> 
19 <body> 
20      
21     <div class="box"> 
22          
23     </div> 
24  
25 </body> 
26 </html>

本文名称：绝对定位元素的水平垂直居中的方法
本文链接：https://www.cdcxhl.com/news39/158889.html

成都网站建设公司_创新互联，为您提供自适应网站、网站设计公司、做网站、外贸建站、云服务器、搜索引擎优化

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容