css-绝对居中的几种方式

最新推荐文章于 2023-12-08 13:52:02 发布

转载最新推荐文章于 2023-12-08 13:52:02 发布 · 102 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/lhbjs/p/7010412.html

本文介绍了一种使用CSS绝对定位使子元素在父元素内水平垂直居中的方法。通过设置父元素相对定位及子元素绝对定位，并结合auto的margin值，实现了子元素在父元素内的精确居中。

 1 .parent{
 2   width:500px;
 3   height:500px;
 4   background:green;
 5   position:relative;
 6 }
 7 .children{
 8   width:200px;
 9   height:200px;
10   background:blue;
11   position:absolute;
12   left:0;
13   top:0;
14   right:0;
15   bottom:0;
16   margin:auto;
17 }
18 <div class="parent">
19   我是parent
20   <div class="children">
21     我是children
22   </div>
23 </div>