前端盒子居中显示方法,前端上下左右居中

浏览: 509次 日期:2018年03月05日 20:11:59 作者:青格勒

前端布局的时候总是会遇到一些需要居中的方案,下面是我平常使用的一些方法,当然还有很多的方法也能居中显示。

 

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>

点击demo查看效果

 

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>

点击demo查看效果

 

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>

点击demo查看效果

 

4、不固定宽高 – CSS上下左右居中 – IE7及以上

当然使用纯CSS也是可以办得到的,这个有个前提条件最外层的box必须有高度,然后可以使用display: table;来居中,如果你不想兼容低版本浏览器的话可以使用这个方法,当然这个方法亲测可以支持到IE7。

 

代码如下:

<div class="box4">
    <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>

点击demo查看效果

 

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>

点击demo查看效果

 

文章链接:http://cenggel.com/htmlcss/70.html

版权声明:文章《前端盒子居中显示方法,前端上下左右居中》由青格勒编写,转载请带上文章链接。

本章内容纯属乱讲,如有雷同,纯属巧合。如有借鉴之处已表明出处。

点击任意位置关闭窗口,感谢您的支持。


打赏规则 - 为了避免对于打赏模式产生误解,说明一下几点内容:

  • 1.打赏纯粹自愿,金额不限,别太多,1块就行;
  • 2.打赏不能作为解答疑问的理由;
  • 3.打赏不能帮你做毕业设计或论文;
  • 4.打赏不能帮你做工作中的项目;
  • 5.打赏就是这不能那不能,只是单纯打赏而已。
  • 5.最后谢谢支持。
关闭
相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注