垂直居中、水平居中、垂直水平居中

http://www.cnblogs.com/xianyulaodi/p/5863305.html

垂直居中固定长度的：

<div class="wrap">
        <div class="center"></div>
</div>

方法一：position+margin-left/margin-top

.wrap{
            width: 200px;
            height:200px;
            background: yellow;
            position: relative;
        }
.center{
            width: 100px;
            height:100px;
            background: green;
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -50px;
            margin-top: -50px;
        }

方法二：position+margin

.wrap{
            width: 200px;
            height:200px;
            background: yellow;
            position: relative;
        }
.center{
            width: 100px;
            height:100px;
            background: green;
            position: absolute;
            margin: auto;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
        }

兼容性：主流浏览器均支持，IE6不支持

方法三：display:table-cell

.wrap{
            width: 200px;
            height:200px;
            background: yellow;
            display: table-cell;
            text-align: center;
            vertical-align: middle;
        }
.center{
            width: 100px;
            height: 100px;
            background: green;
            display: inline-block;
        }
 

兼容性：由于display:table-cell的原因，IE6\7不兼容

方法三：position加 transform

        .wrap{
            width: 200px;
            height:200px;
            background: yellow;
            position: relative;
        }
        .center{
            width: 100px;
            height:100px;
            background: green;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
            -webkit-transform:translate(-50%,-50%);
        }

兼容性：ie9以下不支持 transform，手机端表现的比较好。

方法四：flex;align-items: center;justify-content: center

.wrap {
    background: yellow;
    width: 200px;
    height: 200px;
    display: flex; 
    align-items: center; 
    justify-content: center;
}
 
.center {
    background: green;
    width: 100px;
    height: 100px;
}

移动端首选

方法五：display:flex;margin:auto

.wrap {
    background: yellow;
    width: 200px;
    height: 200px;
    display: flex; 
}
 
.center {
    background: green;
    width: 100px;
    height: 100px;
    margin: auto;
}

移动端首选

方法六：纯position

.wrap {
    background: yellow;
    width: 200px;
    height: 200px;
    position: relative;
}
/**方法一**/
.center {
    background: green;
    position: absolute;
    width: 100px;
    height: 100px;
    left: 50px;
    top: 50px; 
　　
}
/**方法二**/
.center {
    background: green;
    position: absolute;
    width: 100px;
    height: 100px;
    left: 50%;
    top: 50%;
　　margin-left:-50px;
　　margin-top:-50px;
}

兼容性：适用于所有浏览器

方法六中的方法一计算公式如下：

子元素（conter）的left值计算公式：left=(父元素的宽 - 子元素的宽 ) / 2=(200-100) / 2=50px; 
子元素（conter）的top值计算公式：top=(父元素的高 - 子元素的高 ) / 2=(200-100) / 2=50px;

方法二计算公式： 
left值固定为50%; 
子元素的margin-left= -（子元素的宽/2）=-100/2= -50px; 
top值也一样，固定为50%

子元素的margin-top= -（子元素的高/2）=-100/2= -50px;

方法七：兼容低版本浏览器，不固定宽高

<!-- html -->
<div class="table">
    <div class="tableCell">
        <div class="content">不固定宽高，自适应</div>
    </div>
</div>
 
/*css*/
.table {
    height: 200px;/*高度值不能少*/
    width: 200px;/*宽度值不能少*/
    display: table;
    position: relative;
    float:left;
    background: yellow;
}      
 
.tableCell {
    display: table-cell;
    vertical-align: middle;
    text-align: center;        
    *position: absolute;
    padding: 10px;
    *top: 50%;
    *left: 50%;
}
.content {
    *position:relative;
    *top: -50%;
    *left: -50%;
     background: green;
}

总结

如果是移动端，那么用方法四和方法五是比较方便的。而且支持不固定宽高的情况，快、准、狠

如果是PC端，要考虑兼容性的话。方法六是不错滴，也就是纯position。

如果PC端的中间的元素高度不固定，那么就用方法七即可，代码就不复制了

 

水平居中

<body>
    <div class="parent">parent
        <div class="child">children</div>
    </div>
</body>

使用inline-block 和 text-align实现

.parent{text-align: center;}
.child{display: inline-block;}               优点：兼容性好；不足：需要同时设置子元素和父元素

使用margin:0 auto来实现

.child{width:200px;margin:0 auto;}      优点：兼容性好。缺点: 需要指定宽度

使用table实现

.child{display:table;margin:0 auto;}          优点:只需要对自身进行设置；不足:IE6,7需要调整结构

使用绝对定位实现

.parent{position:relative;}
/*或者实用margin-left的负值为盒子宽度的一半也可以实现，不过这样就必须知道盒子的宽度，但兼容性好*/
.child{position:absolute;left:50%;transform:translate(-50%);}
不足：兼容性差,IE9及以上可用

实用flex布局实现

/*第一种方法*/
.parent{display:flex;justify-content:center;}
/*第二种方法*/
.parent{display:flex;}.child{margin:0 auto;}
缺点：兼容性差，如果进行大面积的布局可能会影响效率

垂直居中

vertical-align：只有一个元素属于inline或是inline-block（table-cell也可以理解为inline-block水平）水平，其身上的vertical-align属性才会起作用。

在使用vertical-align的时候，由于对齐的基线是用行高的基线作为标记，故需要设置line-height或设置display:table-cell;

/*第一种方法*/
.parent{display:table-cell;vertical-align:middle;height:20px;}
/*第二种方法*/
.parent{display:inline-block;vertical-align:middle;line-height:20px;}

实用绝对定位

.parent{position:relative;}
.child{positon:absolute;top:50%;transform:translate(0,-50%);}

实用flex实现

.parent{display:flex;align-items:center;}

水平垂直全部居中

利用vertical-align,text-align,inline-block实现

.parent{display:table-cell;vertical-align:middle;text-align:center;}
.child{display:inline-block;}

利用绝对定位实现

.parent{position:relative;}
.child{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);}

利用flex实现

.parent{display:flex;justify-content:center;align-items:center;}

 

 

http://varnull.cn/css-vertical-align-middle/

inline 或者 inline-* 的元素竖直居中

可以借助 padding, line-height, vertical-align 等属性。有如下两种具体情景：

1. 单行竖直居中，如单行文本或者链接

这种情况，通过给元素上下添加相同大小的 padding 值即可实现竖直居中。

可以通过给元素设置 line-height，使其等于父容器的高度，从而实现竖直居中。注意，此时记得要考虑父容器的 padding 和 border 带来的高度变化。

2. 多行竖直居中，如多行文本

和单行文本一样，给元素上下添加相同大小的 padding 值，还是好用滴~

p {
    width: 160px;
    margin: 0 auto;
    color: #fff;
    line-height: 1.5;
    /*  给元素上下添加相同大小的padding值 */
    padding-top: 40px;
    padding-bottom: 40px;
}

另外一种方法，是借助 table 的属性：将父容器设置成 table，需要竖直居中的元素设置为 table-cell，然后就可以使用 vertical-align 属性来居中了。

.container {
    background-color: #fe435e;
    padding-left: 20px;
    padding-right: 20px;
    height: 400px;
    /* 父容器设置成 table*/
    display: table;
}
p {
    width: 160px;
    margin: 0 auto;
    color: #fff;
    line-height: 1.5;
    /* 需要竖直居中的元素设置为 table-cell*/
    display: table-cell;
    vertical-align: middle;
}

块级元素竖直居中

通常借助 绝对定位 和 translate 等手段，在已知或者未知块级元素高度时，分别使用不同的方法。

1. 块级元素高度已知

此时可以使用绝对定位的方法，并借助 margin 可以为负值的特性，实现绝对定位居中：

2. 块级元素高度不固定

与上面提到的使用绝对定位居中的方法原理类似，只不过在元素高度不确定的情况下，借助 translateY 使元素向上移动自身高度的一半，进而实现竖直居中。

/* 先将元素的上边界置于竖直的中间*/
position: relative;  
top: 50%;

/* 再使用 translateY，将元素向上移动自身高度的一半*/
transform: translateY(-50%);

 

posted @ 2016-10-03 12:29  chenxj  阅读(141)  评论(0)    收藏  举报