CSS 垂直置中，css垂直置中

最後更新：2014-10-13 來源：互聯網

上載者：User

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

CSS 垂直置中，css垂直置中

一、垂直置中：單行的行內元素解決方案

置中元素：單行的行內元素，即inline或者inline-*類型元素，如文字、連結等

解決方案：將該行內元素的height、inline-height設定為其父元素的高度

HTML

<div id="container">
<a href="#">hello,gbtags.comhello,gbtags.comhello,gbtags.com</a>
</div>

CSS

#container {
    background: #222;
    height: 200px;
}
a {
    /*height: 200px;*/
    line-height: 200px;
    color: #fff;
}

二、垂直置中：多行的行內元素解決方案

置中元素：多行的行內元素

解決方案：組合使用display:table-cell和vertical-align:middle屬性來定義需要置中元素的父元素

HTML

<div id="container">
  <a href="#">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis blanditiis optio accusamus quia sapiente at labore consectetur in quasi veritatis possimus quod nihil aliquam vero saepe rem quas. Ratione eligendi!
  </a>
</div>

CSS

#container {
    width: 300px;
    height: 300px;
    background: #222;
    /*以下屬性垂直置中*/
    display: table-cell;
    vertical-align: middle;
}
a {
    color: #fff;
}

三、垂直置中：已知高度的塊狀元素解決方案

置中元素：區塊層級元素，如div

解決方案：將待置中元素設定為絕對位置，並將其margin-top值設定為待置中元素高度的一半的負值。

HTML

CSS

div {
    width: 100px;
    height: 100px;
    background: #222;
}
/*以下為置中代碼*/
.item {
    position: absolute;
    top: 50%;
    margin-top: -50px;
    padding: 0;   /*如果有padding設定，相對計算下margin-top的值*/
}

四、垂直置中：未知高度的塊狀元素解決方案

置中元素：區塊層級元素，如div，但不知其高度

解決方案：使用CSS3的transform屬性

HTML

<div class="item">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet sint repellendus ab aut quisquam eligendi est in deleniti.
</div>

CSS

div {
    width: 150px;
    background: #222;
    color: #fff;
}
/*以下為置中代碼*/
.item {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

五、水平垂直置中：已知寬度和高度的元素解決方案

置中類型：垂直和水平同時置中（前提是知道元素的高度和寬度）

解決方案：設定元素絕對位置，並設定margin-top（高度/2）和margin-left值為（寬度/2）的負值

HTML

CSS

div {
    width: 150px;
    height: 250px;
    background: #222;
    color: #fff;
}
/*以下為置中代碼*/
.item {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -125px;
    margin-left: -75px;
}

六、水平垂直置中：未知元素高度和寬度的解決方案

置中類型：水平和垂直置中（前提是該元素的寬度和高度未知）

解決方案：設定該元素為絕對位置，並且使用CSS3的transform屬性

HTML

<div class="item">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate nostrum quaerat debitis.
</div>

CSS

div {
    background: #222;
    color: #fff;
}
/*以下為置中代碼*/
.item {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

七、水平垂直置中：使用flex布局實現

解決方案：設定flex布局，並設定置中元素父元素的justify-content和align-items屬性為center

HTML

CSS

.item {
    width: 100px;
    height: 100px;
    background: #222;
}
/*以下為置中代碼*/
.parent {
    display: flex;
    justify-content: center;
    align-items: center;
    /*需要設定height查看垂直置中效果*/
    background: #ccc;
    height: 300px;
}

DIV+CSS怎讓文字垂直置中？

在說到這個問題的時候，也許有人會問CSS中不是有vertical-align屬性來設定垂直置中的嗎？即使是某些瀏覽器不支援我只需做少許的CSS Hack技術就可以啊！所以在這裡我還要囉嗦兩句，CSS中的確是有vertical-align屬性，但是它只對(X)HTML元素中擁有valign特性的元素才生效，例如表格元素中的<td>、<th>、<caption>等，而像<div>、<span>這樣的元素是沒有valign特性的，因此使用vertical-align對它們不起作用。

CSS網頁布局DIV水平置中的各種方法

一、單行垂直置中

如果一個容器中只有一行文字，對它實現置中相對比較簡單，我們只需要設定它的實際高度height和所在行的高度line-height相等即可。如：

imoker.cn（愛摩客）提供的程式碼片段：

div {
height:25px;
line-height:25px;
overflow:hidden;
}
這段代碼很簡單，後面使用overflow:hidden的設定是為了防止內容超出容器或者產生自動換行，這樣就達不到垂直置中效果了。

imoker.cn（愛摩客）提供的程式碼片段：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "www.w3.org/...al.dtd">
<html xmlns="www.w3.org/1999/xhtml">
<head>
<title> 單行文字實現垂直置中 </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body { font-size:12px;font-family:tahoma;}
div {
height:25px;
line-height:25px;
border:1px solid #FF0099;
background-color:#FFCCFF;
}
</style>
</head>
<body>
<d......餘下全文>>

css 裡面怎讓一個DIV置中 ?

你是要水平置中還是垂直置中？
水平置中：
<style>
.juzhong{margin:0px auto; width:500px;}
</style>
<div class=juzhong></div>

垂直置中：
<style>
#mid{
position:absolute;
top:50%;
left:50%;
margin:-150px 0 0 -150px;
width:300px;
height:300px;
border:1px solid red;
}

</style>
<div id=mid></div>

注意，其中margin:-150px 0 0 -150px;
第一個150是高度的一半，第四個150是寬度的一半

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 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

CSS 垂直置中，css垂直置中

聯繫我們

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support