html中的垂直居中实现

在做H5的过程中，经常会遇到文字或者图片的垂直居中问题，试了不同的办法，感觉这是一个困扰前端程序员的难题。网上也能找到许多文章，本文仅列出我所用到过的一些办法。

文字居中

使用line-height

line-height是最简单的让文字居中的办法了，即设置line-height和div高度一样。但这种使用有限制，高度只有使用绝对值，不能使用百分比之类的相对值。
HTML:

<div>this is vertical align text</div>

CSS:

div {
    height: 100px;
    line-height: 100px;
}

如果是多行文字的话，可以这样：
HTML:

<div><span>vertically centered text</span></div>

CSS:

div
{
  height: 200px;
  line-height: 200px;
}

span
{
  display: inline-block;
  vertical-align: middle;
  line-height: 14px; /* <-- adjust this */
}

表格法

可以借助于html的一些标签来实现垂直居中，例如表格就是可以参考的一种。
HTML:

<div class="ext-box" style="width:100%;height:100%">
    <div class="in-box">
        <span>确定</span>
    </div>
</div>

CSS:

.ext-box {
    display: table;
}
.in-box {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

在上面的写法中，外层div被设置成了表格显示，内层div被改成了表格的一个单元，利用单元格内垂直居中的属性，实现文字居中。

附上两篇stackoverflow上关于文字居中的帖子，比较有参考意义：

Is it possible to vertically align text within a div?

CSS Center text (Horizontal and Vertical) inside a DIV block

图片居中

之前尝试过使用表格法来设置图片居中，偶尔会出现一些无法严格居中的情形，也没搞清楚到底是为什么，只好尝试别的考虑。

inline-block helper

借助于inline-block相互对齐属性，可以实现图片的居中。
HTML:

<div class=frame>
    <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=21 />
</div>

CSS:

.frame {
    height: 25px;      /* equals max image height */
    width: 160px;
    border: 1px solid red;
    white-space: nowrap;

    text-align: center; margin: 1em 0;
}

.helper {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

img {
    background: #3A6F9A;
    vertical-align: middle;
    max-height: 25px;
    max-width: 160px;
}

在上面的代码中，首先设置helper占据frame高度。这个时候，另外一个inline-block标签span就可以中间对齐helper，从而实现图片的居中。当然，这里面的frame也必须是固定高度值。

图片居中，目前只尝试了一个使用办法。附上stackoverflow上的帖子，供大家参考。

How to vertically align an image inside div

可以看出，在对齐的各类办法中，一般都要求高度是固定的。在移动WEB开发中，宽度是固定手机屏大小，但高度一般是可以往下延伸的。不过，我的一般处理办法是尽量避免滚动屏幕，一屏看完所有信息是最好的，所以在设计的时候，布局尽量松散，就是说留有余地，在不同的屏幕上，不会因为这些固定高度的控件挤压布局而出现重叠的情况。

前端开发确实有太多的细节需要考虑，继续积累吧！