完美解決多行文字垂直居中
阿新 • • 發佈：2018-12-31
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>完美解決不固定行數的文字垂直居中</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> body{font-size:14px;font-family:tahoma;} .wrap{display:table; border:1px solid #FF0099; background-color:#FFCCFF; width:760px; height:400px; _position:relative; overflow:hidden;} .wrap .outer{vertical-align:middle; display:table-cell; _position:absolute; _top:50%;} .wrap .inner{_position:relative; _top:-50%;} </style> </head> <body> <div class="wrap"> <div class="outer"> <div class="inner"> <pre> 現在我們要使這段文字垂直居中顯示！ 現在我們要使這段文字垂直居中顯示！ 現在我們要使這段文字垂直居中顯示！ 現在我們要使這段文字垂直居中顯示！ 現在我們要使這段文字垂直居中顯示！ 現在我們要使這段文字垂直居中顯示！ 現在我們要使這段文字垂直居中顯示！ 現在我們要使這段文字垂直居中顯示！ </pre> </div> </div> </div> </body> </html>