css的水平居中和垂直居中总结

Html代码：

<div class="md-warp">
    <div class="md-main">块级元素</div>
    <span>行内元素</span>
</div>

公共CSS代码

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

一、水平居中

行内元素直接给父元素设置text-align:center

.md-warp{
  text-align:center
}

块级元素的方法分为三种

1.margin法

需要满足三个条件:

• 元素定宽(绝对宽度或相对宽度)
• 元素为块级元素或行内元素设置display:block
• 元素的margin-left和margin-right都必须设置为auto

.md-main{
  margin: 0 auto;
}

　

2.定位法

需要满足二个条件：

• 父元素相对定位，元素绝对定位
• 元素定宽(绝对宽度或相对宽度) 或使用transform: translate(-50%,0)

2.1元素left为50%,margin-left为元素宽度的一半

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

2.2  left:0;right:0;margin:0 auto

.md-warp{
  position: relative;
}
.md-main{
  position: absolute;
  left: 0;
  right:0;
  margin: 0 auto;
}

2.3 left:50%,transform: translate(-50%,0)

采用此方法，无需指定元素宽度，translate可以使元素相对于自身的宽度和高度进行移动。

.md-warp{
  position: relative;
}
// 注意此时md-main不设置width为100px
.md-main{
  position: absolute;
  left: 50%;
  -webkit-transform: translate(-50%,0);
  -ms-transform: translate(-50%,0);
  -o-transform: translate(-50%,0);
  transform: translate(-50%,0);
}

IE9+才可以实现。

3.弹性盒子法

使用flex 2012年版本布局, 可以轻松的实现水平居中, 父元素设置如下

.md-warp{
   display: flex;
   justify-content: center;
}

ie10+才支持

二、垂直居中

 单行文本

若父元素高度固定, 则可设置 line-height 等于父元素高度

.md-warp span{
   line-height: 300px;
}

父元素高度不固定，可用 vertical-align 属性, 而vertical-align只有在父层为 td 或者 th 时, 才会生效, 对于其他块级元素, 例如 div、p 等, 默认情况是不支持的. 为了使用vertical-align, 我们需要设置父元素display:table, 子元素 display:table-cell;vertical-align:middle;

.md-warp{
        display: table;
}
.md-warp span{
        display:table-cell;
        vertical-align:middle;
}

ie8+才支持

 块级元素

 

1.定位法

• 父元素相对定位，元素绝对定位，并设置top:50%
• 元素定高(绝对高度或相对高度)

使用方法与2.1至2.3的一致,只是把left换成top,transform改为transform: translate(0,-50%);

2.弹性盒子法

.md-wap{
display: flex;
align-items: center;
} 

ie10+才支持

3.inline-block配合伪类的解决方案

父元素添加一个高度为100%的伪元素，并将该伪元素和子元素都设为inline-block,都设置为垂直居中

.md-warp:after, .md-main{
    display:inline-block;
    vertical-align:middle;
}
.md-warp:after{
    content:'';
    height:100%;
}

兼容性最好，ie6也支持