关于div的水平垂直居中

时间：2017-08-12 11:49:14 阅读：214 评论：0 收藏：0 [点我收藏+]

标签：滚动 display items sla body ie9 logs 水平垂直图片

水平垂直居中

一、未知宽高

1. table布局(display:table)

2. 转化为行内标签display:inline-block，借助另外一个标签高度来实现

3. 绝对布局（position:absolute）+translate

4. flex布局（box-flex）

方法一

思路：显示设置父元素为table，子元素为cell-table，这样就可以使用vertical-align：center，实现水平居中。

优点：父元素（parent）可以动态的改变高度（table元素的特性）

缺点：IE8以下不支持

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>未知宽高元素水平垂直居中</title>
</head>
<style>
.parent1{
    display: table;
    height:300px;
    width: 300px;
    background-color: #FD0C70;
}
.parent1 .child{
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    color: #fff;
    font-size: 16px;
}
</style>
<body>
    <div class="parent1">
        <div class="child">hello world-1</div>
    </div>
</body>
</html>

方法二

思路：使用一个空标签span设置他的vertical-align基准线为中间，并且让他为inline-block，宽度为0

缺点：多了一个没用的空标签，display：inline-block IE 6、7是不支持的

（添加上：_zoom：1;*display:inline）.

当然也可以使用伪元素来代替span标签，不过IE支持也不好。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>未知宽高元素水平垂直居中</title>
</head>
<style>
.parent2{
    height:300px;
    width: 300px;
    text-align: center;
    background: #FD0C70;
}
.parent2 span{
    display: inline-block;;
    width: 0;
    height: 100%;
    vertical-align: middle;
    zoom: 1;/*BFC*/
    *display: inline;
}
.parent2 .child{
    display: inline-block;
    color: #fff;
    zoom: 1;/*BFC*/
    *display: inline;
}
</style>
<body>
    <div class="parent1">
        <div class="child">hello world-1</div>
    </div>
    <div class="parent2">
        <span></span>
        <div class="child">hello world-2</div>
    </div>
</body>
</html>

方法三

思路：子元素绝对定位，距离顶部50%，左边50%，然后使用css3 transform:translate(-50%,-50%)

优点：高大上，可以在webkit内核的浏览器中使用

缺点：不支持IE9以下不支持transform属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>未知宽高元素水平垂直居中</title>
</head>
<style>
.parent3{
    position: relative;
    height:300px;
    width: 300px;
    background: #FD0C70;
}
.parent3 .child{
    position: absolute;
    top: 50%;
    left: 50%;
    color: #fff;
    transform: translate(-50%, -50%);
}
</style>
<body>
<div class="parent3">
        <div class="child">hello world-3</div>
    </div>
</body>
</html>

方法四

思路：使用css3 flex布局

优点：简单快捷

缺点：兼容性不好

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>未知宽高元素水平垂直居中</title>
</head>
<style>
.parent4{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 300px;
    height:300px;
    background: #FD0C70;
}
.parent4 .child{
    color:#fff;
}
</style>
<body>
<div class="parent4">
        <div class="child">hello world-4</div>
    </div>
</body>
</html>

二、

1、假借图片法

这个方法把一些 div 的显示方式设置为inline-block，和图片一样，因此我们可以使用图片的 vertical-align 属性。

<div id="wrapper">  
    <div id="likeImg">
        <div class="content">Content goes here</div>
    </div>
</div>  
#wrapper {
    display: table;
}
#likeImg {
    display: inline-block;
    vertical-align: center;
}

优点：

在各种浏览器中兼容性都非常好，ie6和7中有间距问题

缺点：

很容易影响其他的布局，导致网页布局全部瘫痪

2、绝对定位法

这个方法使用绝对定位的 div，把它的 top 设置为 50％，margin-top设置为负的 content 高度。这意味着对象必须在 CSS 中指定固定的高度。

因为有固定高度，或许你想给 content 指定 overflow:auto，这样如果 content 太多的话，就会出现滚动条，以免content 溢出。

<div class="box">
    <div id="content"> Content goes here</div> 
</div> 
#content {
    position: absolute;
    top: 50%;
    height: 240px;
    margin-top: -120px; /* 盒子本身高度的一半 */
}

优点：

适用于所有浏览器

不需要嵌套标签

缺点：

没有足够空间时，content 会消失(类似div 在 body 内，当用户缩小浏览器窗口，滚动条不出现的情况)

3、插入空标签浮动

这种方法，在 content 元素外插入一个 div。设置此 div height:50%; margin-bottom:-contentheight;

content 清除浮动，并显示在中间。

<div id="box">
    <div id="content">Content here</div>
    <div id="floater"> 
</div>
#floater {
    float: left;
    height: 50%;
    margin-bottom: -120px;
}
#content {
    clear: both;
    height: 240px;
    position: relative;
}

优点：

适用于所有浏览器

没有足够空间时(例如：窗口缩小) content 不会被截断，滚动条出现

缺点：

唯一我能想到的就是需要额外的空元素了，可能对于某些强迫症患者来说是不愿意的(这个方法的应用应该也很广)

4、绝对定位

这个方法使用了一个 position:absolute，有固定宽度和高度的 div。这个 div 被设置为 top:0; bottom:0;。但是因为它有固定高度，其实并不能和上下都间距为 0，因此 margin:auto; 会使它居中。使用 margin:auto;使块级元素垂直居中是很简单的。

<div id="box">
    <div id="content"> Content here</div> 
</div> 
#content {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    height: 240px;
    width: 70%;
}

优点：

简单粗暴,代码简单,其实设计者当初也根本没想到也能这样用,但是聪明的大家硬是凿出了一条简单的路。

缺点：

IE(IE8 beta)中无效

无足够空间时，content 被截断，但是不会有滚动条出现

关于div的水平垂直居中

标签：滚动 display items sla body ie9 logs 水平垂直图片

原文地址：http://www.cnblogs.com/memphis-f/p/7349587.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行

关于div的水平垂直居中

水平垂直居中

一、未知宽高

方法一

方法二

方法三

方法四

二、

1、假借图片法

2、绝对定位法

3、插入空标签 浮动

4、绝对定位

3、插入空标签浮动