水平和垂直居中文本

Question

我想在div中垂直和水平居中放置一些文本，該div包含旁邊的圖像。 到目前為止，我只能使它水平居中，而讓它垂直居中卻很麻煩。 我知道有很多這樣的帖子，提到一些絕對的定位，但是每次我嘗試時，所有內容都會重疊。

繼承人jsfiddle： https ://jsfiddle.net/kkae9rzy/

如果水平擴展結果屏幕，以便所有內容都在同一行（基線）上，則會看到文本未垂直居中。

這是我的CSS代碼：

#titleheader{
   margin:auto;
   text-align: center;
   padding:100px;
   background:#f2f2f2;
}

#titleheader > h1 {
   padding-left: 75px;
   padding-right: 75px;
   display:inline-block;
   font-family: "Bariol_Regular", "Helvetica Neue", Helvetica, Arial, sans-serif;
   color: #555;
   letter-spacing: 3px;
   font-size: 50px;
}

#wind{
   display:inline-block;
}
#intel{
   display:inline-block;
}

Answer 1

我沒有看到任何版本在您的版本中“垂直居中”，但我在<img>標簽vertical-align: middle （通過CSS）添加了一個vertical-align: middle看起來就是您想要的。 見小提琴 。

Answer 2

您可以使用flexbox布局以及其他一些方法來實現此目的。

這是對CSS進行修改以利用flexbox方法的小提琴。 要特別注意#titleheader 。 https://jsfiddle.net/kkae9rzy/2/

你會看到，我添加了一些Flexbox的規則#titleheader ：

display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;

display: flex; 告訴#titleheader使用flexbox顯示布局。

（有關Flexbox的更多信息，請參見http://dev.w3.org/csswg/css-flexbox/和https://css-tricks.com/snippets/css/a-guide-to-flexbox/ ）

align-items: center; 告訴#titleheader將其所有子項與交叉軸的中心對齊 （對於我們的演示，X軸為垂直居中）。

justify-content: center告訴#titleheader將其所有子項與主軸中心對齊 （對於我們的演示，為Y軸，因此將其水平居中）。

flex-wrap: wrap告訴#titleheader將子元素包裝到新行上，而不是強制將它們全部放在同一行上，而不管可用的屏幕空間如何。

Flexbox是一個非常強大的工具。 它正在迅速獲得瀏覽器支持，我懷疑我們很快就能在沒有太多polyfill的情況下開始使用它。

這是對flexbox的當前支持： http ://caniuse.com/#feat=flexbox

為了確保在使用flexbox時獲得最廣泛的支持，請確保包括我上面提到的flexbox聲明的所有供應商前綴版本。 這可以通過使用諸如autoprefixer（ https://github.com/postcss/autoprefixer ）之類的工具來實現，該工具在編譯時會將所有必需的供應商前綴添加到CSS中。

包括我上面提到的屬性的所有供應商前綴將如下所示：

display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;

-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;

-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;

-webkit-flex-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;

Answer 3

這應該工作

position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);