2. 程式人生 > >不固定寬和高的div 水平和垂直都居中

不固定寬和高的div 水平和垂直都居中

阿新 • • 發佈：2019-01-18

在寫css的時候經常遇到的一個問題，當div沒有固定的寬度或者高度的時候，如何才能讓div水平或者垂直居中顯示。
如果div有固定寬度的話，用padding，margin都很容易實現。方法有很多種。不過經常遇到這種div沒有固定的寬度高度的情況，我們就不能用margin,padding設定固定的距離了。這個問題讓很多人頭疼。而怎麼樣才能讓這個div居中顯示呢？其實這種情況解決的辦法也是有很多種，js，css都可以實現。

1.先來看看寬度不固定的div如何設定水平居中：

  1. <style type=“text/css”>   
  2. .container{width:500px;height
    :80px;background:#C2300B;margin-left:50px;padding-top:10px;text-align:center;}   
  3. .center{display:inline-block;border:2pxsolid#fff;}   
  4. .center{_display:inline;} /*針對ie6 hack*/
  5. .center a{float:left;border:1pxsolid#fff;padding:5px10px;margin:10px;color:#fff;text-decoration:none;}   
  6. </style>   
  7. <div class=
    “container”>   
  8. <div class=“center”><a href=“#”>1</a><a href=“#”>2</a><a href=“#”>3</a>   
  9. <div style=“clear:both”></div></div>  

無固定寬度的div水平居中程式碼要點：

這種div寬度不固定的情況，常見於分頁處，由於分頁不確定有多少頁，所以用於分頁的元素所在的容器寬度通常不是固定的。
父容器container加css屬性 text-align:center;子容器center加css屬性display:inline-block;
.center{_display:inline;} 為針對ie6的hack，針對ie6前面的display:inline-block;的作用是在ie下觸發元素的layout，使其haslayout。

2.再看看高度不固定的div如何設定垂直居中：

  1. <div id=“vc”><div id=“vci”><div id=“content”>   
  2. 我們垂直居中了，我們水平居中了   
  3. </div></div></div>   
  4. <style type=“text/css”>   
  5. #vc { display:table; background-color:#C2300B; width:500px; height:200px; overflow:hidden; margin-left:50px; _position:relative; }   
  6. #vci { vertical-align:middle; display:table-cell;  _position:absolute; _top:50%; }   
  7. #content { color:#fff; border:1pxsolid#fff;  _position:relative; _top:-50%;  }   
  8. </style>  

無固定高度的div垂直居中程式碼要點：
父容器vc的css屬性 display:table;overflow:hidden;
子容器vci的css屬性 vertical-align:middle;display:table-cell;
針對ie6的hack，vci容器的 _position:absolute;_top:50%; 和content容器的 _position:relative; _top:-50%;

我們看看寬度高度不固定的div垂直居中和水平居中的例項：

360截圖20140614114201098

  1. <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>   
  2. <html xmlns=“http://www.w3.org/1999/xhtml”>   
  3. <head>   
  4. <meta http-equiv=“Content-Type”content=“text/html; charset=utf-8″ />   
  5. <title>無標題文件</title>   
  6. <style type=“text/css”>   
  7. #vc { display:table; background-color:#000; width:1200px; height:1000px; overflow:hidden; margin-left:50px; _position:relative; }   
  8. #vci { vertical-align:middle; display:table-cell; text-align:center; _position:absolute; _top:50%; _left:50%; }   
  9. #content { color:#fff; border:1pxsolid#fff; display:inline-block; _position:relative; _top:-50%; _left:-50%; }   
  10. </style>   
  11. <body>   
  12. <div id=“vc”><div id=“vci”><div id=“content”>   
  13. 我們垂直居中了，我們水平居中了,真的是可以居中的嗎，<br />   
  14. 你信不信我反正是新了<br />   
  15. <br />   
  16. 美浩工作室是一個90後團隊，網站建設設計為一體的一個<br />   
  17. 年輕化網際網路團隊！   
  18. </div></div></div>   
  19. </body>   
  20. </html>  

程式碼要點：
父容器vc的css屬性 display:table;overflow:hidden;
子容器vci的css屬性 vertical-align:middle;display:table-cell;
針對ie6的hack，vci容器的 _position:absolute;_top:50%; 和content容器的 _position:relative; _top:-50%;
如果不需要水平居中的話，需要註釋掉vci容器的text-align:center;_left:50%;以及content的display:inline-block;_left:-50%;

那如果寬和高都固定了怎麼水平垂直居中呢？且看下面程式碼：

寬度高度固定的div垂直居中和水平居中例項：

360截圖20140614114800176

  1. <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>   
  2. <html xmlns=“http://www.w3.org/1999/xhtml”>   
  3. <head>   
  4. <meta http-equiv=“Content-Type”content=“text/html; charset=utf-8″ />   
  5. <title>無標題文件</title>   
  6. <style type=“text/css”>   
  7. .guding{width:500px;height:400px;background:#000;margin-left:50px;position:relative;}   
  8. .gd{width:150px;height:100px;background:#fff;position:absolute;top:50%;left:50%;margin-top:-50px;margin-left:-75px;}   
  9. </style>   
  10. <body>   
  11. <div class=“guding”><div class=“gd”>美浩工作室測試固定高寬div<br />   
  12. 居中了</div></div>   
  13. </body>   
  14. </html>  

程式碼要點
父容器要用相對定位position:relative;否則的話子元素會相對於瀏覽器視窗進行絕對定位。
子容器絕對定位，top:50%;left:50%;margin-top，margin-left的值取該容器高度，寬度的一半的負值

原文地址：http://blog.mihoweb.com/archives/790.html

相關推薦

不固定寬和高的div 水平和垂直都居中

在寫css的時候經常遇到的一個問題，當div沒有固定的寬度或者高度的時候，如何才能讓div水平或者垂直居中顯示。 如果div有固定寬度的話，用padding，margin都很容易實現。方法有很多種。不過經常遇到這種div沒有固定的寬度高度的情況，我們就不能用margin,

css中固定寬高div與不固定寬高div垂直居中的處理辦法

分配 css代碼 http min har 空間 -i dex round 固定高寬div垂直居中 如上圖，固定高寬的很簡單，寫法如下： 1 position: absolute; 2 left: 50%; 3 top: 50%; 4 width:200px;

不固定寬高元素水平垂直居中

背景： 本文主要講述不用flex佈局和grid佈局時如何設定不定高寬元素的水平垂直居中，這是很多時候經常遇到的問題。 頁面結構 <div class="box"> <div class="content"><span>

div水平和垂直居中顯示

tex wid bottom gin alt 分享 left log mage .div1{ width: 100px; height: 100px; border: 4px solid red; position: absolute;

水平垂直居中（固定寬不固定寬）

AC color eight osi -s bsp spa gin relative 1、水平垂直居中 方法一：使用absolute定位的時候，元素脫離文檔流，導致margin:auto;失效，需要配合使用left:0;right:0;top:0;bottom:0; &l

如何讓DIV水平和垂直居中

CSS讓DIV水平居中 說明，本文中所指的DIV包括HTML頁面中所有的元素。 讓一個DIV水平居中，直接用CSS就可以做到。只要設定了DIV的寬度，然後使用margin設定邊距0 auto，CSS自動算出左右邊距，使得DIV居中。 .mydiv{ margin:

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

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

未知寬高div水平垂直居中3種方法

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> </head> <body> <!--方法1：一個未知寬高的彈出框，水平垂直居中--&

經典面試題：如何讓DIV水平和垂直居中

CSS讓DIV水平居中 說明，本文中所指的DIV包括HTML頁面中所有的元素。 讓一個DIV水平居中，直接用CSS就可以做到。只要設定了DIV的寬度，然後使用margin設定邊距0 auto，CSS自動算出左右邊距，使得DIV居中。  .mydiv{       ma

不固定寬度 浮動元素實現 水平居中

ext hang 問題 http 間距 size center logs 技術 兩種方法 前提 父元素 overflow:hidden;子元素float:left;寬度都是不固定的 1.父元素 text-align:center;font-size:0;子元素 disp

Selenium基礎之--01(將瀏覽器最大化,設置瀏覽器固定寬、高,操控瀏覽器前進、後退)

TP IV sleep .get class 需求 靈活 屏幕 web自動化 1，將瀏覽器最大化 我們知道調用啟動的瀏覽器不是全屏的，這樣不會影響腳本的執行，但是有時候會影響我們“觀看”腳本的執行。 coding=utf-8 from selenium import web

Redis5.0 主從模式和高可用 搭建和測試報告

Redis 單機模式很簡單，相關測試水文看這裡 Redis5 壓力測試結果反饋報告 必須的，今天接著寫水文，寫一寫現在redis 支援的三種叢集，主從模式，哨兵模式，Cluster模式，今天先搞主從模式 主從模式  主從模式是最簡單的叢集模式，其實就是複製基本只能解決讀寫分離問題，主機伺服器一旦宕機

如何讓一個DIV水平，垂直方向都居中於瀏覽器？

tex absolute idt osi gin nbsp border 實現 abs <style type="text/css"><!-- div {position:absolute;top:50%;left:50%;margin:-150px 0

hmtl div水平、垂直居中

最近寫網頁經常需要將div在螢幕中居中顯示，遂記錄下幾個常用的方法，都比較簡單。水平居中直接加上<center>標籤即可，或者設定margin:auto;當然也可以用下面的方法下面說兩種在螢幕正中（水平居中+垂直居中）的方法放上示範的html程式碼：<body>  

實現div水平、垂直居中的幾種方法

1、最常用的，也是最簡單的(利用position定位、再用margin偏移) <!DOCTYPE html> <html> <head> <meta ch

3行Css實現div水平、垂直居中

HTML部分： <div class="container"> <!-- This is your content ... --> </div> Css部分： 就像下面，只需要給.containe

父元素為一個div，寬度高度不固定，子元素是一個塊狀元素，寬高已知，如何實現子元素在父元素內水平、垂直居中？

父元素為一個div，子元素是一個塊狀元素，寬高已知，如何實現子元素在父元素內水平、垂直居中？  1、 //利用相對定位，讓子元素垂直居中 <!DOCTYPE html> <html> <head> <title><

div中 li寬度不固定 ie6和ie7不兼容不自動換行

pwm https 不兼容 ofo http ace light href lan 我的li因為內容字數不一樣，所以寬度不固定，給他float:left屬性後，ie6和ie7不兼容，不自動換行！我給ul或者li： ul{white-space: nowrap} 屬性還是

HTML5利用canvas壓縮圖片（不改變圖片寬和高）

最近專案中有一個手機拍照上傳的需求，現在的智慧手機攝像頭畫素很高，拍出來的照片大小大都在5M左右，當手機在上傳圖片時遇到了問題，之前採用的方法是將圖片先進行Base64編碼，然後上傳到伺服器，結果因為圖片太大，導致伺服器老是回覆超時錯誤；權衡之下決定在圖片上傳之前先將圖片壓縮； 以下為我採用方法

如何讓DIV模塊隨著頁面固定和不固定隨意切換

con lan auto pos top 隨著 源代碼 gin scrip 最近做公司官網，左邊文章列表，右邊文章詳情，要求左邊文章列表隨著頁面向上滾動到某個位置時，固定在頁面頂部，當滾動到footer出現時，div模塊隨頁面滾動而不再固定在頂部。 思路： 1，給外層的di