div內控制項垂直居中顯示
1. 如何讓div中的div垂直居中
建議用line-height，設置父級div的line-height值與父級height值一致（註：子級div不可設置浮回動，定位）
定位方式。
假設父答級為div1，子級為div2,子級height為100px；
div1{position:relitive;}
div2{
position:absolute;
top:50%;
margin-top:-50px;
}
2. 如何設置div中的內容垂直居中
使文字在div中水平和垂直居中的的css樣式為
text-align:center;/*水平居中*/
line-height:20px;/*行距設為與div高度一致*/
示例如下：
- HTML元素
<div>水平垂內直居中</div>
- css樣式
div{
容width:200px;height:200px;/*設置div的大小*/
border:1pxsolidgreen;/*邊框*/
text-align:center;/*文字水平居中對齊*/
line-height:200px;/*設置文字行距等於div的高度*/
overflow:hidden;
} - 顯示效果
3. 如何讓div中的內容上下居中顯示
如果是行內元素如標簽或文本則使用line-height
例：
這是一行文本
若果裡面的標簽是塊級回元素答如div標簽，則使用margin-top
margin-top的值是外div高度減去內div高度再除以2
例
這個div會水平、垂直居中顯示
4. 如何讓div中的內容垂直居中
以下是讓div中的內容垂直居中的具體操作方法：
1、首先我們准備好一個空的專html結構的文檔。
5. div+css 怎麼讓一個小div在另一個大div裡面 垂直居中
方法一、小div絕對定位或相對定位，這樣小div脫離標准流，大div有固定寬高，用小div的margin去擠大div
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>Title</title><style>
.father{
width: 600px;
height: 600px;
background-color: orangered;
}
.son{
width: 300px;
height: 200px;
background-color: lawngreen;
position: absolute;
margin: 200px 150px;
}
</style></head><body><div><div></div></div></body></html>
注意：如果小div沒有絕對定位或相對定位，且大div沒有border，那麼小div的margin實際上踹的是「流」，踹的是這「行」。如果用margin-top，大div整體也掉下來了。如下：
(5)div內控件垂直居中顯示擴展閱讀：
一個絕對定位的元素，如果父輩元素中出現了也定位了的元素，那麼將以父輩這個元素，為參考點。工程上，「子絕父相」有意義，父親元素沒有脫標，兒子元素脫標在父親元素的范圍裡面移動。
絕對定位之後，所有標准流的規則，都不適用了。所以margin:0 auto;失效。
display:inline和display:inline-block，會使margin:0 auto;失效。
固定寬度的盒子才能使用margin:0 auto;居中
6. div 內部元素垂直居中問題
樓上說的對，可能得用line-height，如果line-height沒有用的話就用給外部的div加padding或者讓內部的元素加樣式margin，都行，是在不行你再接著問
7. 如何讓div中的文字垂直居中顯示
使文字在div中水平和垂直居中的的css樣式為
1
2
text-align:center; /*水平居中*/
line-height: 20px; /*行距設為與div高度一致*/
示例如下：內
HTML元素
1
<div>水平垂直居容中</div>
css樣式
1
2
3
4
5
6
7
div{
width:200px;height:200px; /*設置div的大小*/
border:1px solid green; /*邊框*/
text-align: center; /*文字水平居中對齊*/
line-height: 200px; /*設置文字行距等於div的高度*/
overflow:hidden;
}
顯示效果
8. css3 如何讓div裡面的元素垂直居中
|您好，你要求的是指定css3盒子布局的垂直居中
1.首先是要使盒子為display:box | -webkit-box; | -moz-box;;
2.設置元素的box-pack和box-align即可回，這兩個屬性答當前只有webkit和moz支持。
3.box-pack控制的是水平的左和右，取值有：start(居左)，center(居中)，end(居右)。
4.box-align的取值有：start(居上)，center(居中)，end(居下)。
如果我們要設置垂直居中的話只需要將這兩個屬性的值都設置為center即可
9. 如何讓一個控制項（或一行文字）在一個DIV中垂直居中
使文字在div中水平來和垂直居中源的的css樣式為
1
2
text-align:center; /*水平居中*/
line-height: 20px; /*行距設為與div高度一致*/
示例如下：
HTML元素
1
<div>水平垂直居中</div>
css樣式
1
2
3
4
5
6
7
div{
width:200px;height:200px; /*設置div的大小*/
border:1px solid green; /*邊框*/
text-align: center; /*文字水平居中對齊*/
line-height: 200px; /*設置文字行距等於div的高度*/
overflow:hidden;
}
顯示效果
10. 怎樣讓div的內容垂直居中顯示
雖然Div布局已經基本上取代了表格布局，但表格布局和Div布局仍然各有千秋，互有長處。比如表格布局中的垂直居中就是Div布局的一大弱項，不過好在千變萬化的CSS可以靈活運用，可以製作出准垂直居中效果，勉強過關。
要讓div中的內容垂直居中，無非有以下幾種方法，等我一一列舉：
一、行高（line-height）法
如果要垂直居中的只有一行或幾個文字，那它的製作最為簡單，只要讓文字的行高和容器的高度相同即可，比如：
p { height:30px; line-height:30px; width:100px; overflow:hidden; }
這段代碼可以達到讓文字在段落中垂直居中的效果。
二、內邊距（padding）法
另一種方法和行高法很相似，它同樣適合一行或幾行文字垂直居中，原理就是利用padding將內容垂直居中，比如：
p { padding:30px; }
這段代碼的效果和line-height法差不多。
三、模擬表格法
模擬表格法其實就是用CSS中對元素的聲明讓塊元素像表格一樣顯示，用到的CSS屬性有display、vertical-align等。 先看下面的Html代碼：
<div id="box"> <div id="content">居中顯示</div> </div>
參照以上Html代碼，讓最外面名為box的Div呈表格樣式顯示，然後再讓box中名為content的Div呈單元格顯示，並利用vertical-align:middle讓其垂直居中，這樣就模擬出來和表格一樣的顯示方式，CSS代碼如下：
#wrap
{ height:400px; display:table; } #content { vertical-align:middle;
display:table-cell; border:1px solid #FF0099; background:#000;
width:400px; }
但這種方法有一個弊端，由於IE瀏覽器對高度理解會產生錯誤，所以這種方法僅對Firefox有效，對IE無效，既然這樣，我們就需要找出對IE的修正方法，於是有了另外一種方法。
四、定位法
顧名思義，定位法是利用CSS定位屬性position對元素進行定位的方法，也屬於模擬方法，不過它對IE的支持還是不錯的。 它的Html代碼為：
<div id="box"> <div id="sub"> <div id="content">垂直居中</div> </div> </div>
這段代碼比上一種方法中多出了一個名為sub的Div，它的作用是用來定位，原理就是：首先讓box出於相對定位，sub相對box出於相對定位，位於box垂直方向的50%，再讓content中的真正內容出於sub垂直方向的-50%，從而製作出content在box中垂直居中的效果，它們的CSS代碼如下：
#wrap
{ border:1px solid #000; background:#F00; width:400px; height:400px;
position:relative; } #subwrap { position:absolute; top:50%; } #content {
border:1px solid #000; position:relative; top:-50%; color:#FFF; }
這段代碼無論是在IE中還是Firefox中，都能正常居中了