解決各類文本居中問題
阿新 • • 發佈：2017-09-25
borde -h 顯示 內聯元素 flow wid 版本 定位 spl
padding:25px;
}
<divid="wrap">
<divid="content"> <pre>現在我們要使這段文字垂直居中顯示！Webjx.Com </pre></div>
</div> </div>
</body>
position:relative;
overflow:hidden;
}
div#content{
position:absolute; top:50%; height:400px;
margin-top: -200px;
}
文本垂直居中方法比較常用，比如一定高度的盒子中，未知高度的盒子等常用於總結下文本垂直居中的以下方法：
1.單行文本垂直居中：
如果一個容器中只有一行文字，對它實現居中相對比較簡單，我們只需要設置它的實際高度height和所在行的高度line-height相等即可。如：
div{
height:25px;
line-height:25px;
}
padding:25px;
}
3、多行文本固定高度的居中（模擬table方法）
css中垂直居中樣式vertical-align:middle屬性,但是此屬性只對標簽<td>、<th>、<caption>，和內聯元素display設置為inline/inline-block起作用，其他的則不起作用
(1)InternetExplorer6及以下的版本中是無效的vertical-align:middle對表格起作用(可以用下面第4種方法)，那麽可以用div來模擬成為table，讓vertical-align:middle屬性起作用。註意，display:table和display:table-cell的使用方法，前者必須設置在父元素上，後者必須設置在子元素上，因此我們要為需要定位的文本再增加一個<div>元素：
div#wrap{
height:400px;
display:table;
}
div#content{
vertical-align:middle;
display:table-cell;
border:1pxsolid#FF0099;
width:760px;
}
代碼如下: <body>
<divid="wrap">
<divid="content"> <pre>現在我們要使這段文字垂直居中顯示！Webjx.Com </pre></div>
</div> </div>
</body>
5.使用用定位的方式position，讓其距離頂部高度為50%，然後設置margin-top：-(盒子高度/2)px即可
代碼如下: div#wrap{
position:relative;
overflow:hidden;
}
div#content{
position:absolute; top:50%; height:400px;
margin-top: -200px;
}
解決各類文本居中問題