直接上代码

.box {
    position: relative;
    width: 500px;
    height: 300px;
    border: 1px solid #FFF;
    background-color: #999;
    display: table;
}

.wrap {
    display: table-cell;
    vertical-align: middle;
    *position:absolute;
    * top: 50%;
    * left: 0;
}

.content { *position:relative;
    * top: -50%;
    * left: 0;
}

        <div class="box">
            <div class="wrap">
                <p class="content">
                    我是文字随便几行我是文字随便几行我是文字随便几行我是文字随便几行我是文字随便几行我是文字随便几行
                    <a href="http://www.xiaoqiang.org/css/text-wrap-and-vertical-align-center.html" title="固定宽度的文字自动换行并垂直剧中">固定宽度的文字自动换行并垂直剧中</a>
                </p>
            </div>
        </div>
        <div class="box">

            <div class="wrap">
                <p class="content">
                    是文字随便几行我是文字随便几行我是文字随便几行我是文字随便几行我是文字随便几行我是文字随便几行是文字随便几行我是文字随便几行我是文字随便几行我是文字随便几行我是文字随便几行我是文字随便几行是文字随便几行我是文字随便几行我是文字随便几行我是文字随便几行我是文字随便几行我是文字随便几行
                </p>
            </div>
        </div>

试试看：固定宽度的文字自动换行并垂直剧中

2011.10.10更新，参照http://sofish.de/1909修正IE7bug

渐进增强(Progressive Enhancement)

上图来自第六届D2前端技术论坛王啟恩/Adam Wang的演讲稿，渐进增强的理念区别于优雅降级更加关注于内容，然后再锦上添花。

更多内容 →