當div位置爲絕對時，垂直對齊標題：絕對

我希望標題文本在div中間垂直對齊，目前使用margin-top將其向下推，但當標題較長並溢出時導致不一致到第二行。當div位置爲絕對時，垂直對齊標題：絕對

請在這裏看到的樣品： http://ryconbg.jaffewebsites.com.au/our-company/sustainability-and-energy-efficiency/

HTML

<div id="page-featured" style="background: url(<?php echo $src[0]; ?>) !important; overflow: hidden; background-size: cover !important; background-position: center !important;"></div> 

    <div id="page-overlay"> 
     <div id="page-titles"> 
      <h1><?php the_title(); ?></h1> 
     </div> 
    </div>

CSS

#page-overlay, #page-featured { 
    height: 400px; 
    width: 100%; 
} 

#page-overlay { 
    position: absolute; 
    top: 95px; 
    background-color: rgba(0,0,0,0.1); 
    z-index: 100; 
    color: #FFF; 
} 

#page-titles { 
    width: 100%; 
    height: 100%; 
    text-align: center; 
} 

#page-titles h1, 
#page-titles p { 
    margin: 0px; 
    position: absolute; 
    top: 40%; 
    left: 0; 
    right: 0; 
}

提前感謝！

來源

2015-09-25 Lisa Jaffé

對不起，正在修正 - 目前正在按下頂部：40％而不是保證金頂部 –

請** [edit] **您的問題並添加詳細信息。謝謝。 –

爲什麼垂直對齊：中心不工作？你爲什麼要用邊距來居中文本？ – RelatedRhymes

您可以使用transform:translate（CSS3），以垂直對齊

此處詳細瞭解：http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/

CSS

#page-overlay, #page-featured { 
    height: 400px; 
    width: 100%; 
} 
#page-overlay { 
    position: absolute; 
    top: 95px; 
    background-color: rgba(0, 0, 0, 0.1); 
    z-index: 100; 
    color: #FFF; 
} 
#page-titles { 
    width: 100%; 
    height: 100%; 
    text-align: center; 
    position: relative; 
    -webkit-transform-style: preserve-3d; 
    -moz-transform-style: preserve-3d; 
    transform-style: preserve-3d; 
} 
#page-titles h1, #page-titles p { 
    margin: 0px; 
    position: absolute; 
    top: 50%; 
    -webkit-transform: translateY(-50%); 
    transform: translateY(-50%); 
    text-align: center; 
    width: 100%; 
}

DEMO HERE

來源

2015-09-25 08:51:20

這只是個訣竅！驚人！謝謝 –

如果您知道要嘗試居中的元素的高度（不需要其容器的高度），則可以使用絕對定位和負邊距來實現此目的。將top的值更改爲#page-titles h1爲50%，然後將margin-top減去其高度的一半，在您的情況下爲margin-top: -24px。我做了一個小提琴演示這種方法：http://jsfiddle.net/8s1g7ws0/你可以看到它也適用於水平居中。

這個想法是，top: 50%使元素開始在它的容器的中間，所以它不是居中。然後，通過將它的一半高度移回來，我們將兩個元素的中點匹配起來。

如果你不知道你的元素的高度，您可以顯示您的容器元素爲table-cell，那麼你可以使用vertical-align: middle到中心裏面有什麼。下面是你需要在你的情況下進行更改：

添加display: table到#page-overlay
從#page-titles h1刪除position: absolute。
加display: table-cell和vertical-align: middle到#page-titles。

Browser support for display: table

來源

2015-09-25 08:45:19

當div位置爲絕對時，垂直對齊標題：絕對

回答

相關問題