前端布局的时候总是会遇到一些需要居中的方案, 下面是我平常使用的一些方法, 当然还有很多的方法也能居中显示.
1, 宽高固定 - 使用绝对定位居中显示
这儿一般是用在固定的大小的 box 中使用, 如果相对定位的 box 大于屏幕不建议使用.
代码如下:
- <div class="box1">
- <div>
- </div>
- </div>
- <style type="text/CSS">
- .box1{ position:relative; height:500px; width:500px; background: #eee;
- margin:0 auto; } .box1 div{ height:200px; width:200px; position:absolute;
- left:50%; top:50%; margin:-100px 0 0 -100px; background: #999; }
- </style>
2, 宽高固定 - 使用固定定位居中显示
固定定位主要是一些弹出层使用比较好, 而且在所有的高度的文档中都可以使用.
代码如下:
- <div class="box2">
- <div>
- </div>
- </div>
- <style type="text/css">
- .box2{ height:500px; width:500px; position:fixed; left:50%; top:50%; margin:-250px
- 0 0 -250px; background: #eee;}
- </style>
3, 宽高不固定 - 屏幕中间 - 使用 jq 来计算
有些时候咱们会遇到高度和宽度不固定的 box 需要居中的需求, 这时候咱们可以使用 JS 来计算 box 的宽高然后在控制他的 margin 来居中.
代码如下:
- <div class="box3">
- </div>
- <style type="text/css">
- .box3{ position:fixed; left:50%; top:50%; width:600px; height:600px; background:
- #eee; padding:20px;}
- </style>
- <script type="text/javascript">
- $('.box3').CSS({
- 'margin-top': -$('.box3').outerHeight(true) / 2 + 'px',
- // 获取总高 / 2
- 'margin-left': -$('.box3').outerWidth(true) / 2 + 'px' // 获取总宽 / 2
- });
- </script>
4, 不固定宽高 - CSS 上下左右居中 - IE7 及以上
当然使用纯 CSS 也是可以办得到的, 这个有个前提条件最外层的 box 必须有高度, 然后可以使用 display: table; 来居中, 如果你不想兼容低版本浏览器的话可以使用这个方法, 当然这个方法亲测可以支持到 IE7.
代码如下:
- <div class="box4">
- (www.gendan5.com)
- <div>
- <div>
- <p>
- 不固定宽高 - CSS 上下左右居中 - IE7 及以上
- </p>
- <p>
- 不固定宽高 - CSS 上下左右居中 - IE7 及以上
- </p>
- <p>
- 不固定宽高 - CSS 上下左右居中 - IE7 及以上
- </p>
- <p>
- 不固定宽高 - CSS 上下左右居中 - IE7 及以上
- </p>
- <p>
- 不固定宽高 - CSS 上下左右居中 - IE7 及以上
- </p>
- </div>
- </div>
- </div>
- <style type="text/css">
- .box4{ height:500px; width:500px; display: table; border-collapse: collapse;
- margin:0 auto; } .box4>div{ display:table-cell; vertical-align:middle;
- text-align:center; } .box4>div>div{ background:#eee; padding:20px; line-height:28px;
- display:inline-block; }
- </style>
5, 上下左右定位法 - CSS 上下左右居中 - IE7 及以上
其实这个方法是我偶然发现的, 当初还真是被惊到了
代码如下:
- <div class="box5">
- </div>
- <style type="text/css">
- .box5{ position:fixed; top:20%; left:20%; bottom:20%; right:20%; background:#999;
- }
- </style>
来源: http://www.bubuko.com/infodetail-3190567.html