垂直居中方法总结(转)

今天根据客户的修改意见,修改一组有带有缩略图片的标题的列表,图片在列表的最左边,图片的大小是固定的.要求是,标题字数如果过多的话,可以折成两行.但是要求垂直居中.最后解决了这个问题,但是没有做兼容性的测试.

下面就是我收集到的垂直的居中的几个方法,每个方法都拿出一个实例来演示

绝对居中

.relative-container{
    position:relative
}
.absolute-container{
    position:absolute;
    margin:auto;
    width:50%;
    height:50%;
    top: 0; left: 0; bottom: 0; right: 0;
}

一个栗子:垂直居中

优点:

1. 兼容所有的浏览器
2. 代码简单,没有太多的hack

缺点:

1. 必须声明一个高度
2. 在window phone上不起作用

负边框居中

.n-margin-container{
        width: 300px;  
        height: 200px;  
        padding: 20px;  
        position: absolute;  
        top: 50%; left: 50%;  
        margin-left: -170px; /* (width + padding)/2 */  
        margin-top: -120px; /* (height + padding)/2 */  
}

优点:

1. 代码量少
2. 兼容性好

缺点:

1. 不支持自适应,不支持百分比和max-/min-属性
2. 边距大小与padding,和是否定义box-sizing: border-box有关，计算需要根据不同情况。

变形

用transform属性来代替负边距

.transform-center{
    width: 50%;  
    margin: auto;  
    position: absolute;  
    top: 50%; left: 50%;  
    -webkit-transform: translate(-50%,-50%);  
      -ms-transform: translate(-50%,-50%);  
          transform: translate(-50%,-50%);  
}

优点:

1. 相比负边距,能够自适应,支持百分比
2. 代码少

缺点:

1. IE8以下不支持
2. 可能会影响其他的transform属性
3. 某些情况下回出现文本或元素边界渲染模糊的现象

表格居中

算是终极大招吧

css:

.table-like{
    display:table;
}

.table-cell-like {  
  display: table-cell;  
  vertical-align: middle;  
}  
.Center-Block {  
  width: 50%;  
  margin: 0 auto;  
}  

html:

<div class="table-like">  
  <div class="table-cell-like">  
    <div class="Center-Block">  
    <!-- CONTENT -->  
    </div>  
  </div>  
</div>  

优点：

1. 高度可变
2. 内容溢出会将父元素撑开。
3. 跨浏览器兼容性好。

缺点：

1. 需要额外html标记

行内块元素

一个同事看到他用到过这种居中方法

/* This parent can be any width and height */
.block {
  text-align: center;
  /* May want to do this if there is risk the container may be narrower than the element inside */
  white-space: nowrap;
}
 
/* The ghost, nudged to maintain perfect centering */
.block:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em; /* 消除inline-block元素之间的间距,具体可以查看后面的参考 */
}

/* The element to be centered, can also be of any width and height */ 
.centered {
  display: inline-block;
  vertical-align: middle;
  width: 300px;
}

html:

<div class="block" style="height: 300px;">
    <div class="centered">
        <h1>Some text</h1>
        <p>But he stole up to us again, and suddenly clapping his hand on my shoulder, said—"Did ye see anything looking like men going towards that ship a while ago?"</p>
    </div>
</div>
<div class="block" style="height: 200px;">

例子:inline-block垂直居中

优点：

1. 高度可变
2. 内容溢出会将父元素撑开。
3. 支持跨浏览器，也适应于IE7。

缺点：

1. 需要一个容器
2. 水平居中依赖于margin-left: -0.25em;该尺寸对于不同的字体/字号需要调整。
3. 内容块宽度不能超过容器的100% - 0.25em。

flex

flex居中的例子

.flex-parent{
    display:flex;
    justify-content:center;
    align-items: center;
    background: #AAA;
    height: 300px;
}
.flex-child{
    background: #222;
    color: #FFF;
    width: 100px;
    height: 100px;    
}

html:

<div class="flex-parent">
  <div class="flex-child"></div>
</div>

优点：

1. 内容块的宽高任意，优雅的溢出。
2. 可用于更复杂高级的布局技术中。

缺点：

1. IE8/IE9不支持。
2. Body需要特定的容器和CSS样式。
3. 运行于现代浏览器上的代码需要浏览器厂商前缀。
4. 表现上可能会有一些问题

小结

1. 绝对定位的方法比较万金油
2. display:table的方法兼容性最好
3. flex是未来的趋势
4. transform是实现不知道要固定的框的大小情况下的好办法,但是元素可能会模糊

参考

• 八种垂直居中布局
• 演示的效果的地址
• 极客标签课程垂直居中的相关练习
• inline-block这里为什么:before有一个margin-right:-0.25em?