注：以下demo都只是針對現代瀏覽器所做，未相容低版本的IE以及其他非主流瀏覽器。

1.文字垂直水平居中<相容所有瀏覽器>

HTML

1 <div class="button">
2    確定  
3 </div>

CSS

.button{ height: 50px; line-height: 50px }

2.絕對定位 + transform<瀏覽器相容性：Safari 3.1+、 Chrome 8+、Firefox 4+、Opera 10+、IE9+>

HTML

1 <div class="wrapper">
2    <
 
div class="content">
3         為中華之崛起而讀書！
4    </div>
5 </div>

CSS

.wrapper{ width: 800px; height: 500px; position: relative; }

/* 元素垂直、水平居中 */
.content{
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, 50%);
}

/*
元素水平居中

.content{
   position: absolute;
   left: 50%;
   transform
 
: translateX(-50%);
}

元素垂直居中

.content{
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
}

*/

補充：該方法不僅可設定元素垂直居中，還可設定元素的水平居中，主要適用於欲設定垂直/水平居中的元素，其寬度、高度未知的情況