css文字垂直置中 - vertical-align




css垂直居中 (7)

我怎麼能在<div>垂直居中<div>

我的代碼到目前為止:

<div style="height:322px;overflow:auto;">
    <div style="border: Solid 1px #999999;padding:5px;">
    </div>
</div>

我試過“最高:50%;” 和“vertical-align:middle;” 沒有成功

編輯:好的,所以它已被討論了很多。 而且我可能會開始另一場迷你火焰戰。 但為了爭論,我怎麼用桌子做呢? 到目前為止,我已經將css用於其他所有事情,所以我不會嘗試使用“良好實踐”。

編輯:內部div沒有固定的高度


兩種技術很多

以下瀏覽器兼容性僅在IE中進行了測試。 現代瀏覽器應該處理這些沒問題。

#1 - 絕對和自動保證金

兼容性: IE 8 +

  • 頂部,右側,底部,左側和margin: auto將div垂直和水平居中。

  • 需要寬度和高度,但可以是百分比

也可以應用於父設置position: relative的內部div position: relative

注意: IE 9 +可以使用max-widthmax-height而不是百分比高度。 IE 8需要一個height

html,
body {
  height: 100%;
}
.outer {
  background: #ff8f00;
  height: 50%;
  width: 50%;
  margin: auto;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
<div class="outer"></div>

#2 - Flexbox

兼容性: IE 11.請參閱此處獲取其他瀏覽器支持

使用Flexbox和靈活的vwvh長度

body {
  margin: 0;
}

.outer {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}
.inner {
  width: 50vw;
  height: 50vh;
  background: #ff8f00;
}
<div class="outer">
  <div class="inner">

  </div>
</div>


display: flex屬性特別適用於垂直和水平居中。 對於垂直居中,將屬性display: flexjustify-content: center到容器中。


嘗試行高


如果您願意使用flexbox顯示模型,則無需使用表格。

例如

<div style="height: 322px; width: 200px; display: flex; background: gray;">
    <div style="border: Solid 1px #999999; padding:5px; margin: auto;">
      This text would be both vertically AND horizontally centered, if it's inner height and width were less than the parent's height and width.
    </div>
</div>

如果您只想要垂直居中,請使用規則“margin:auto 0;” 在孩子div。

ps如果您想要跨瀏覽器兼容性(例如“display:-webkit-flexbox;”),您必須為您使用flexbox添加前綴


最高:50%; 應該管用。 你需要將margin-top設置為負高度的一半,否則它將從中間開始。 因此,您需要內部div的高度。 你也可能需要職位:親屬;

對你來說這樣的內心div。

position:relative;
top: 50%;
height:80px;
margin-top: -40px; /*set to a negative number 1/2 of your height*/

使用負面尺寸不是很整潔(它甚至意味著什麼?)但也許是最簡單的方法。


簡而言之,你被塞滿了。 我在最近的一個問題中提到了更多這方面的問題你可以不使用表格來進行HTML佈局嗎? 基本上,CSS狂熱分子需要掌握並意識到,如果沒有表格,你只能做一些你不能做(或做得不好)的事情。

這種反桌歇斯底里是荒謬的。

表格單元格可以很好地處理垂直居中,並且可以根據您的需要向後兼容。 它們還比浮點數,相對/絕對定位或任何其他CSS類型方法更好地處理並排內容。

喬爾在“ 不要讓建築宇航員嚇唬你 ”中創造(或至少推廣)“建築師宇航員”一詞。 那麼,同樣地,我認為術語“CSS宇航員”(或“CSS Space Cadet”)同樣合適。

CSS是一個非常有用的工具,但它也有一些非常嚴重的限制。 我最喜歡的是編號列表可能只顯示為“3”。 但不是“3)”或“(3)”(至少在CSS3生成內容之前 - 或者是CSS2.1?無論哪種方式都沒有得到廣泛支持)。 多麼疏忽。

但比這更大的是垂直居中和並排佈局。 這兩個領域仍然是純CSS的一個巨大問題。 另一張海報決定了相對定位與負邊距高度相結合的方式。 那怎麼樣比:

<html>
<head>
  <title>Layout</title>
  <style type="text/css">
    #outer { height: 200px; border: 1px solid black; width: 600px; background-color: #DDD; }
    #inner { width: 150px;  border: 1px solid red; background: yellow; margin: auto; line-height: 100%;  }
  </style>
</head>
<body>
<table>
<tr>
<td id="outer">
  <div id="inner">Inner</div>
</td>
</tr>
</table>
</body>
</html>

每次都可以在任何地方使用。

這是一篇關於CSS中垂直居中文章 。 為了實現類似的事情,他們使用三個嵌套的div與相對+絕對+相對定位,以獲得垂直居中 。 我很抱歉,無論是誰寫的 - 以及任何認為這是一個很好的迪亞的人 - 都只是失去了情節。

表格與CSS中給出了一個反駁:CSS Trolls begone 。 證據確實存在於布丁中。 絕大多數前20名(Alexa)網站仍然使用表格進行佈局。 有充分的理由。

因此,自己決定:您希望您的網站工作,花更少的時間讓它工作嗎? 或者你想成為一名CSS宇航員?


<div style="display: table; height: 400px; #position: relative; overflow: hidden;">
  <div style=" #position: absolute; #top: 50%;display: table-cell; vertical-align: middle;">
    <div style=" #position: relative; #top: -50%">
    vertically centered
    </div>
  </div>
</div>

更多信息





css