【转载】css水平垂直居中

样本:

基础样式：

.wrap{
         width:400px;
         height:300px;
         max-width:100%;
         border:1px solid #000;
}
.content {
        display:block;
        width:100px;
        height:100px;
        background:#f00;
}

水平居中：margin|定位法

1.margin方法

条件：

• 元素定宽
• 元素为块级元素(行内元素使用block)
• 元素的margin-left/right须设置为auto；

使用margin:0 auto;后的效果如下：

marign水平居中

2.定位法

条件：

• 元素定宽
• 元素决定定位，并设置left:50%
• 元素负左边距margin-left为宽度的一半

.warp{
        position:relative;
}
.content {
        position:absolute;
        left:50%;
        margin-left:-50px;
}

定位水平居中

3.定位法2-元素宽度不固定

实现环境: IE9+

.wrap{
         position:relative;
}
.content{
        position:absolute;
        left:50%;
        -webkit-transform:translate(-50%,0);
        -ms-transform:translate(-50%,0);
        -o-transform:translate(-50%,0);
        transform:translate(-50%,0);
}

不定宽度下的水平居中

文字水平居中

单行文字：使用text-align:center;
多行文字：当做一个块级元素；使用行高

垂直居中：定位法

1.定位法

和水平居中类似，设置top:50%,负边距和transform属性进行相对更改即可。

1.1 height=100px

.wrap{
        position:relative;
}
.content{
        position:absolute;
        top:50%;
        margin-top:-50px;
}

position垂直居中

使用css3中的clac()简化之：
.content{postion:absolute; clac(50%,-50px);}

1.2 height没有高度

.wrap{
       position:relative;
}
.content{
       position:absolute;
       top:50%;
       -webkit-transform:translate(0,-50%);
       -moz-transform:translate(0,-50%);
       -o-transform:translate(0,-50%);
       transform:translate(0,-50%);
}

不定高的元素垂直居中

单行文本垂直居中：
条件：

• 元素内容是单行，高度固定不变
• 将line-height设置成语height的值一样

1.3 display:table-cell

实现环境IE+8

父元素设置display:table-cell; vertical-align:middle;

.wrap {
       display:table-cell; 
       vertical-align:middle;
       width:400px;
       height:400px;
       border:1px solid #000;    
}
.content {
width:100px; height:100px; background:#f00;
}

table-cell垂直居中

1.3-image垂直居中

图片添加vertical-align:middle 属性

.wrap{
         border:1px solid #f00;
}
.content{
       vertical-align:middle;
}
span {
       display:inline-block;
       height:100%;
       vertical-align:middle;
}

图片vertical-align+span垂直居中

父元素添加text-align:center;即可水平垂直居中

2.视窗单位解决:

.wrap{
       position:relative;
}
.content{
       position:absolute;
       margin-top:50vh;
       transform:translate(-50px);
}

稍微改动实现水平垂直居中：

.wrap{
position:relative;
}
.content{
position:absolute;
margin-top:50vh;
transform:translate(150px,-50px);
}

使用视窗实现水平垂直居中

注意：元素只能用在视窗中

Flexbox解决方案

在需要设置水平垂直居中元素的父元素上设置display:flex;在需要设置水平垂直居中元素上设置margin:auto;即可

.wrap{
         display:flex;
}
.content{
          margin:auto;
}

flexbox实现水平垂直居中

实现文本的水平垂直居中

.wrpa{
      display:flex;
}
.content{
       display:flex;
       align-items:center;
       justify-content:center;
       margin:auto;
}

文本水平垂直剧中

另：未知宽度下实现元素的水平居中：所需元素display:table margin:0 auto;
文章来源:知乎-前端进击者