当前位置: 首頁 > HTML&CSS > 9种网页的垂直居中

9种网页的垂直居中

1、

css

        .center1{display: table;vertical-align: middle;width: 100%;height: 100%;}
        .center1_box{display: table-cell;vertical-align: middle;text-align: center;}
        .center1_content{width: 200px;margin:0 auto;}

html

    <div class="center1">

        <div class="center1_box">

            <div class="center1_content"><p>这是一段垂直居中的内容</p>           </div>

        </div>

    </div>


优点:

center1_content可以动态改变高度(不需在 CSS 中定义)。当 center1_box里没有足够空间时, content 不会被截断


缺点:

Internet Explorer(甚至 IE8 beta)中无效.


2、

css

.center2{
width:200px;
height:200px;
overflow:auto;
position: absolute;
left: 50%;
top:50%;
margin-left:-100px;
margin-top: -100px;
background: #ccc;
}

html

<div class="center2">

   <div class="center2_box"><p>这是一段垂直居中的内容</p></div>

</div>

优点:

适用于所有浏览器

缺点:

没有足够空间时,

center2_box会消失

容器必须固定高度


3、

css

.center3{width: 100%;height: 100%;}
.center3_layout{height: 50%;margin-bottom: -100px;}
.center3_box:before{height: 50%;margin-bottom: -100px;width: 100%;display: block;}
.center3_box{width: 200px;height: 200px;margin:0 auto;background: #ccc;overflow: auto;}

html

<div class="center3">

    <div class="center3_layout"></div>

    <div class="center3_box"><p>这是一段垂直居中的内容</p></div>

</div>

其实就是用center3_layout把center3_box往下挤,然后center3_box再回缩一般固定高度

优点:

适用于所有浏览器

缺点:

center3_box需要固定高度

center3的容器可能需要脱离文档流


4、

css

.center4{
background: #ccc;
position: absolute;
left:0;
right:0;
top:0;
bottom: 0;
margin:auto;
width: 200px;
height: 200px;
}/*可以使用百分比

html

<div class="center4">

        <div class="center4_box"><p>这是一段垂直居中的内容</p></div>

</div>


和方法2非常类似但是是通过设置left,right,top,bottom均为0,然后使用margin:auto来实现。

优点:

全浏览器兼容,不用固定宽高,可以用百分比定宽高。

缺点:

方法较为奇怪,不知道会不会以后浏览器又不支持此方法


5、

css

.center5{display: flex;justify-content: center;align-items: center;width: 100%;height: 100%;}
.center5_box{width: 300px;}

html

    <div class="center5">

        <div class="center5_box">

        <p>这是一段垂直居中的内容</p>

        <p>这是一段垂直居中的内容</p>

        </div>

    </div>


优点:

css3新属性flex布局,可以实现多种布局排序方式,容易维护改变。

缺点:

低版本浏览器不兼容。


6、

css

.center6{
overflow:auto;
position: absolute;
left: 50%;
top:50%;
transform:translate(-50%,-50%);
text-align: center;
background: #ccc;
}

html

<div class="center7">

    <div class="center7_box"><p>这是一段垂直居中的内容</p></div>

</div>


其实就是方法2的transform变种,但是有一个明显的区别就是,transform可以获取到容器的宽高。

优点:

不用定固定宽高

缺点:

低版本浏览器不支持


7、

css

        .center7{width: 100%;height: 100%;display: -webkit-box;
            -webkit-box-pack:center;
            -webkit-box-align:center;
            -webkit-box-orient: vertical;
            text-align: center;
        }

html

    <div class="center7">

        <div class="center7_box"><p>这是一段垂直居中的内容</p></div>

    </div>


优点:

使用display:box;简单易理解(另外它还可以实现多行文字的溢出省略号);

缺点:

新属性,旧版本浏览器不兼容。


8、

css

        .center10{
            width: 100%;height: 100%;
            text-align:center;
        }
        .center10_box{
            vertical-align:middle;
            display:inline-block;
        }
        .center10:after{
            content:'';
            width:0;
            height:100%;
            display:inline-block;
            vertical-align:middle;
        }

html

<div class="center10">

   <div class="center10_box"><p>这是一段垂直居中的内容</p></div>

</div>

在元素前或后面增加一个height:100%;的伪类实现;

光看代码可能很难理解原理,来个全选就很明显了看下图

优点:

大多数浏览器都支持此属性效果(除了IE6,7必须声明<!DOCTYPE>

缺点:

IE6,7必须声明<!DOCTYPE>


9、

以上讲的都是块元素的垂直居中,下面将一下行元素的垂直居中。

    .center9{background: #ccc;width: 200px;height: 200px;line-height: 200px;}

html

<div class="center9">

   <p>这是一段垂直居中的内容</p>

</div>


对的,就是简单设置行高而已,为什么值得提出来讲,是因为,它可以和onload配合来实现

图片的垂直居中(也就是说图片是行元素),有时候工作上会需要实现这种功能,瀑布流之类的。


上述提到的另外8种块元素垂直居中的方法中,在不考虑低版本浏览器的兼容下,比较建议使用方法5的flex布局方案。

在考虑低版本兼容的方法的话,可以考虑使用方法4,因为低版本的浏览器已经不会进行迭代了,而且对这个方法是支持的,虽然看起来很奇怪,如果真的以后新版本出现情况的话,可以使用其他更多种的新方法进行hack兼容。

评论 ( 0 )
下一篇: 已经没有下一篇了

网友留言