首頁 > 開發者 > CSS

css元素垂直水平置中執行個體

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

例

/* 
    名稱: 垂直 水平 置中
    用法:
        1. [原理] 設定寬度和高度，父節點為 position:relative; CSS是這樣寫的:
   
          position:absolute;left:50%;top:50%;
          margin-left:-元素自身寬度的一半;
          margin-top:-元素自身高度的一半;
   
        2. [原理] table, 用起來就更簡單了, 只要添加:
   
          text-algin:center;
          vertical-align:middle;
   
        3. [方法] 提供模板化的CSS class方法, 規則如下:

 代碼如下 複製代碼

   
          <div class="sl-hvalign" style="width:500px"> <!-- 記得加寬度, 不要寫行內樣式, 這裡只是一個提示 -->
                 <div class="sl-hvalign-cnt">
                         <div class="sl-hvalign-cnt-inner">
                               <!-- your code -->
                         </div>
                 </div>
          </div> <!-- .sl-hvalign -->
 */


.sl-hvalign{
    display:table;
    overflow:hidden;
    margin:0 auto;
    height: 100%;
    *position:relative;
}

.sl-hvalign-cnt{
    display:table-cell;
    vertical-align: middle;
    *position:absolute;
    top:50%;
}

.sl-hvalign-cnt-inner{
    *position:relative;
    *top:-50%;
}

單純的圖片垂直置中，寫三層標籤確實有些費，但是這不得不說是一種折中的方案，當有圖片、有文字時，是一個比較好的選擇。。

 代碼如下 複製代碼

<!doctype html>
<html>
<head>
<meta charset='utf-8' />
<title></title>
<style type="text/css">
.out{width:400px;height:300px;margin:20px auto;display:table-cell;text-align:center;vertical-align:middle;background:#ccc;}
.out img{width:100px;height:100px;background:#fcc;}
</style>
</head>

<body>
<div class='out'>
<img src="" alt="" />
</div>
</body>
</html>


其他的CSS實現垂直置中的方法
A
在 content 元素外插入一個 div。設定此 div height:50%; margin-bottom:-contentheight;。
content 清除浮動，並顯示在中間。
優點：適用於所有瀏覽器；沒有足夠空間時(例如：視窗縮小) content 不會被截斷，捲軸出現
缺點：唯一我能想到的就是需要額外的空元素了

 代碼如下 複製代碼

#floater{float:left; height:50%; margin-bottom:-120px;}
#content{clear:both; height:240px; position:relative;}

<div id="floater"></div>
<div id="content">
Content here
</div>

B
使用了一個 position:absolute，有固定寬度和高度的 div。這個 div 被設定為 top:0; bottom:0;。但是因為它有固定高度，其實並不能和上下都間距為 0，因此 margin:auto; 會使它置中。使用 margin:auto;使區塊層級元素垂直置中是很簡單的。優點：簡單；缺點：IE(IE8 beta)中無效；無足夠空間時，content 被截斷，但是不會有捲軸出現

 代碼如下 複製代碼

<!doctype html>
<html>
<head>
<title></title>
<meta charset='utf-8' />
<style type="text/css">
.outer{height:240px;width:500px;margin:20px auto 0;position:relative;background:#ccf;}
.inner{width:300px;height:100px;background:#9f9;position:absolute;top:0;bottom:0;left:0;right:0;margin:auto;text-align: center;}
.inner img{height:100px;}
</style>
</head>

<body>
<div class="outer">
<div class="inner">
<img src="bokan.png" alt="" />
</div>
</div>
</body>
</html>

C
使用絕對位置的 div，把它的 top 設定為 50％，top margin 設定為負的 content 高度。這意味著對象必須在 CSS 中指定固定的高度。
因為有固定高度，或許你想給 content 指定 overflow:auto，這樣如果 content 太多的話，就會出現捲軸，以免content 溢出。
優點：適用於所有瀏覽器；不需要嵌套標籤。缺點：沒有足夠空間時，content 會消失(類似div 在 body 內，當使用者縮小瀏覽器視窗，捲軸不出現的情況)

 代碼如下 複製代碼

.content {
position:absolute;
top:50%;
height:240px;
margin-top:-120px; /* negative half of the height */
}

<div class="content">
Content goes here

</div>

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

相關關鍵詞：
css ellipsis css oblique css scheduler css selectors css alarms skin css lynda css
相關文章
css實現滑鼠滑過改變文字(中文變英文)
selenium使用Xpath+CSS+JavaScript+jQuery的定位方法（治療selenium各種定位不到，點...
使用CSS巧妙地製作背景色漸層動畫執行個體
詳解css display屬性中常見的四個屬性值用法（代碼執行個體）
CSS修改iframe內的樣式問題
如何用CSS改變上劃線、底線以及刪除線的顏色呢？

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

熱門內容

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More