整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
然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代碼如下：
#box{ border:1px solid #000; background:#F00; width:400px; height:400px; position:relative; } #sub{ position:absolute; top:50%; left:40% } #content{ border:1px solid #000; position:relative; top:-50%; color:#FFF; }
這段代碼無論是在IE中還是Firefox中，都能正常居中了
實想讓整個DIV盒子在頁面實現自動居中非常簡單，只需要一小段JS代碼代碼就可以實現。有時候我們做頁面效果也好，做程序功能的開發也好。只要思路理清楚了，相信做起來會非常的得心應手。
下面就跟大家一起簡單分析下JS是如何實現讓DIV盒子，在頁面自動居中，并且隨著頁面的變動，也能居中。
思路：
一、首先我們的DIV盒子模型，一般是絕對定位于瀏覽器的，那么首先我們可以先獲取整個頁面（瀏覽器的可視區）的寬度、高度。
二、然后獲取自身DIV盒子的寬度、高度。
三、用瀏覽器可視區的寬度、高度，減去DIV自身的寬度，高度，然后除以2。就可以獲取到DIV距離頁面的top值，left值。在賦值給DIV相應的top值，left值。
四、隨著我們的瀏覽器窗口的改變，讓DIV盒子也能隨著頁面的改變而居中。（利用onresize事件）
代碼截圖：
代碼如下:
寫頁面的時候，經常會遇到元素垂直居中的需求。有時候一連試了幾種方法，并沒有效果，那是因為你沒有用對方法，每種垂直居中，都有不同的使用條件。下面我們來詳細了解一下吧。
這里收集了八種不同的方法。
適用場景：單行文字垂直居中。
在一個塊級元素中有一行字，想讓文字垂直居中，便可以在塊級元素上設置和元素高度一致的行高。如圖所示<div>元素，添加行高后，文字的位置就從左邊變成右邊的，實現了垂直居中。
html
<div id="div">
你好
</div>css
#div{
height:50px;
line-height:50px;
}適用場景：圖片垂直居中。
<div id="div">
<img src="image.png" id="img" />
</div>給父元素添加line-height,給圖片元素加上vertical-align: middle。
#div {
line-height: 200px;
}
#img {
vertical-align: middle;
}適用場景：居中元素能被撐開有高度即可使用。
html
<div id="div">
<div id="block">content</div>
</div>css
#div {
position:relative;
}
#block {
positopn:absolute;
top:50%;
transform: translateY(-50%)
}適用場景：多行文字垂直居中，或者將塊元素轉成行內元素也可使用。
vertical-align 只對 table-cell 以及 inline-element 起作用，vertical-align 的值是相對于其父元素的，父元素必須是行內元素。如果想用于塊元素，我們可以將父元素轉化為table，這樣就能使用此方法。
多行文字居中
// html
<div id="div">
<span id="content">那是因為你沒有用對方法，每種垂直居中，都有不同的使用條件。下面我們來詳細了解一下吧。</span>
</div>
// css
#div{
display: table;
}
#span {
display: table-cell;
vertical-align: middle;
}塊元素居中
#div {
display: table;
}
#block {
display: table-cell;
vertical-align: middle;
}適用場景：這種方法適用于塊級元素，需要設置元素的高度。也就是設置子元素距離父元素頂部50%，然后通過margin把子元素向上移動自身高度的一半。
html
<div id="div">
<div id="block">content</div>
</div>css
#div {
position:relative;
}
#block {
positopn:absolute;
top: 50%;
left: 50%;
height: 30%;
width: 40%;
margin: -15% 0 0 -20%;
}適用場景：都可以使用。
html
<div id="div">
<div id="block">content</div>
</div>css有兩種寫法：
// 方法一：
#div {
display:flex;
align-item:column;
}
// 方法二：
#div {
display:flex;
flex-direction:column; // 改變主軸方向
justify-content:center; // 定義主軸的對齊方式
}適用場景：塊級元素垂直居中。
把要垂直居中的元素相對于父元素絕對定位，top和bottom設置為相等的值，我這里設置成0了。再將要居中的元素的margin設為auto，這樣就可以實現垂直居中了。
html
<div id="div">
<div id="block">content</div>
</div>css
#div {
position:relative;
}
#block {
positopn:absolute;
top:0;
bottom:0;
margin:auto 0;
}適用場景：須知父元素的高度和子元素的高度。如果指定父元素高度為300px，子元素高度為100px，要實現垂直居中需要設置父元素的上下padding為100px。
html
<div id="div">
<div id="block">content</div>
</div>css
#div {
padding: 100px 0;
}喜歡的話，歡迎點贊收藏！
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
