1驯耻、div中單行文字的垂直居中
在div中單行的文字需要垂直居中時,只需要對所在的div添加行高line-height等于div的高度,并添加overflow:hidden防止因為防止內容超出容器或者產生自動換行太援,從而使垂直居中失效
<style type="text/css">
div {
height:100px;
line-height:100px;
overflow:hidden;
}
</style>
2幅骄、多行未知高度文字的垂直居中
如果div的高度是可變的那么我們就可以設置一個padding值劫窒,試使div的上下padding值相等即可,這樣就可以使文字看起來像是被垂直居中了一樣拆座。
<style type="text/css">
div {
padding:30px;
{
</style>
3主巍、多行文本固定高度的居中
CSS中的vertical-align屬性只會對擁有valign特性的(X)HTML標簽起作用,但是在CSS中還有一個display屬性能夠模擬挪凑,所以我們可以使用這個屬性來讓<div>模擬<table>就可以使用vertical-align了(vertical-align的值是middle孕索,而水平居中align的值是center)。注意,display:table和 display:table-cell的使用方法,前者必須設置在父元素上捂掰,后者必須設置在子元素上妆兑,因此我們要為需要定位的文本再增加一個<div>元素骡技。(該方法在Internet Explorer 6及以下的版本中是無效的)
<style type="text/css">
div#wrap {
height:400px;
display:table;
}
div#content {
vertical-align:middle;
display:table-cell;
border:1px solid red;
background-color: yellow;
width:760px;
{
</style>
4搞乏、知道div的高度
要讓DIV水平和垂直居中吧史,必需知道該DIV得寬度和高度吠各,然后設置位置為絕對位置翎嫡,距離頁面窗口左邊框和上邊框的距離設置為50%欠动,這個50%就是指頁面窗口的寬度和高度的50%,最后將該DIV分別左移和上移惑申,左移和上移的大小就是該DIV寬度和高度的一半具伍。
<style type="text/css">
.div{
width:300px;
height:200px;
position:absolute;
left:50%;
top:50%;
margin:-100px 0 0 -150px
}
</style>