2. 程式人生 > >html 中div垂直居中的三種方式

html 中div垂直居中的三種方式

阿新 • • 發佈：2019-02-20 
1.第一種：
  1. <style type="text/css">   
  2. <!--   
  3. .con_div{   
  4. width:400px;   
  5. height:300px;   
  6. border:1px solid #777;   
  7. text-align:center;   
  8. display:table-cell;   
  9. vertical-align:middle;   
  10. background:red;   
  11. color:#fff;   
  12. line-height:300px;   
  13. }   
  14. -->   
  15. </style>   
  16. <div class="con_div">   
  17. 測試內容ddddddddddd   
  18. </div>  

2.第二種：

  1. <style type="text/css">   
  2. <!--   
  3. .con_div{   
  4. width:400px;   
  5. height:300px;   
  6. border:1px solid #777;   
  7. text-align:center;   
  8. display:table-cell;   
  9. vertical-align:middle;   
  10. background:red;   
  11. color:#fff   
  12. }   
  13. /*FOR IE*/
  14. .fixie{   
  15. width:0;   
  16. height:100%;   
  17. display:inline-block;   
  18. vertical-align:middle;   
  19. }   
  20. -->   
  21. </style>   
  22. <div class="con_div">   
  23. <span class="fixie"></span>   
  24. 測試內容   
  25. </div>

3.第三種：

  1. <style>
  2. #warp {   
  3.   position: absolute;   
  4.   width:500px;   
  5.   height:200px;   
  6.   left:50%;   
  7.   top:50%;   
  8.   margin-left:-250px;   
  9.   margin-top:-100px;   
  10.   border: solid 3px red;   
  11. }   
  12. </style>
  13. <body>
  14. <divid=warp>Test</div>
  15. </body>

相關推薦

html 中div垂直居中的三種方式

1.第一種： <style type="text/css">   <!--   .con_div{   width:400px;   height:300px;   border:1p

如何讓DIV水平和垂直居中三種方法

方法1 CSS實現水平和垂直居中 要讓DIV水平和垂直居中，必需知道該DIV得寬度和高度，然後設定位置為絕對位置，距離頁面視窗左邊框和上邊框的距離設定為50%，這個50%就是指頁面視窗的寬度和高度的50%，最後將該DIV分別左移和上移，左移和上移的大小就是該D

5.struts2中Action類中獲取ServletAPI的三種方式

靜態方法 ttr intercept println action 需求 對象實例 ext.get ctype **Servlet的API的訪問（開發中偶爾會使用到）** 1.在Action類中也可以獲取到Servlet一些常用的API，有如下三種方式獲取 *

php中字串定義的三種方式

三種定義方式 單引號 雙引號 定界符<<< 單引號與雙引號的區別： $name='張三'; echo $name; 輸出 張三 $name="張三"; echo $name; 輸出 張三

Java中增強類中的方法的三種方式

增強Java中類的方法的方式 增強Java類中的方式有三種分別是類的繼承、裝飾者模式、動態代理模式 · 繼承方式【最簡單，但是不是所有的都可以用繼承 （需要知道父類才可以）】 **能夠控制這個類的構造的時候，才可以使用繼承。 · 裝飾者模式 **包裝的物件和被包裝的物件都要實現

在CDH5.14.0和Apache--Hbase1.2 中安裝Phoenix的三種方式

目錄: 第一種CDH離線安裝(下載解壓安裝) 第二種CDH線上安裝(下載parcer線上安裝) 第三種Apache-Hbase離線安裝(下載解壓安裝) 第一種離線安裝(下載解壓安裝) 沒有參考別人的,自己弄的.因為之前弄過apapche-hbase的安裝.後來

JavaScript中元素建立的三種方式

目錄 1. document.write("標籤的程式碼及內容"); 缺陷:如果是在頁面載入完畢後,此時通過這種方式建立元素,那麼頁面上存在的所有的內容全部被幹掉 <body> <input type="button" valu

JS中註冊事件的三種方式及相容性處理

第一種(所有瀏覽器都支援，但是無法給同一個物件的同一個事件註冊多個事件處理函式) btn.onclick = function() { alert("111") } btn.onclick = function() {

AndroidStudio中新增依賴的三種方式以及如何引入so檔案和arr檔案

轉載自：http://blog.csdn.net/zxc514257857/article/details/56534863 前言   AndroidStudio中新增依賴的三個選項，如圖：   分別為：庫依賴（Library dependency）、檔案依賴（

react中書寫css的三種方式

React中如何定義css樣式 內部樣式 <style> .alert-text{ font-size: 20px; }

html dom獲取節點的三種方式

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head

golang中使用timer的三種方式

// (A) time.AfterFunc(5 * time.Minute, func() { fmt.Printf("expired") } // (B) create a Timer object timer := time.NewTimer(5 * time.Minute) <-tim

js中宣告函式的三種方式

1）.函式宣告方式     function sum（）{}；呼叫：sum（）2）.函式表示式宣告方式    var add=function（）{}；呼叫：add（）3）使用Function建構函式var add2=new Function（）；呼叫 ：add2（）

LeetCode——解決刪除陣列中重複元素問題三種方式

情景要求： （1）輸入的陣列元素為基本型別int。 （2）返回不含重複元素的陣列，其型別為基本型別int。 （3）對最後的結果陣列元素順序沒有要求，可亂序也可排序。 經過一系列的思考與實踐，總結出了以下三種不同情形“刪除陣列重複元素”的解決辦法。

QT中讀取XML檔案三種方式 的例項

第一部分：QXmlStreamReader XML（eXtensible Markup Language）是一種通用的文字格式，被廣泛運用於資料交換和資料儲存（雖然近年來 JSON 盛行，大有取代 XML 的趨勢，但是對於一些已有系統和架構，比如 WebService，由於歷史原因，仍舊會繼

JS中宣告變數的三種方式 const var let

在JavaScript中有三種宣告變數的方式：const  var let。 const：用於宣告常量。注意：定義的變數的時候，必須同時初始化，且其值之後不可以修改。  const PI=3.14; // const a;//報錯。沒有賦初值。 console.

Spring中自動裝配的三種方式

Sprring中Bean的自動裝配有3種方法：一、byName 二、byType 三、Constructor 第一步：配置我們的spring-autowriting.xml，我們先使用第一種方法ByName 第二步：建立3個類，一個測試類TestAutoWriting，一

android中多渠道打包的三種方式

國內的Android開發者還是很苦逼的，由於眾所周知的原因，google play無法在國內開啟（翻牆的就不在考慮之內了），所以Android系的應用市場，群雄爭霸。後果就是國記憶體在著有眾多的應用市場，產品在不同的渠道可能有這不同的統計需求，為此Android開發人員

css3中建立動畫的三種方式詳解

$div1.transition({ transform : "translateX(300px)" },3000,"linear", function(){ $div2.transition({ transform : "translateX(300px)" },30

Tomcat中釋出專案的三種方式

第一種 直接將要訪問的網頁（比如test.html）放到Tomcat的Root根目錄下，比如我的tomcat解壓路徑是 D:\Program Files\apache-tomcat-7.0.69 那麼只需要將網頁放置在： D:\Program Files\apache