垂直未知的高度DIV

內居中DIV我現在有這樣的HTML：垂直未知的高度DIV

<div id:root> 
    <div id:contents> 
    <h3>I am the one that need to be vertical centered.</h3> 
    <p>Lorem300..............</p> 
    </div> 
    <img scr:"somewhere.jpg"></img> 
</div>

而且目前SASS：

img 
    width: 100% 
    height: inherit

我要解決的問題是我想要的「根」 DIV與img具有完全相同的尺寸。在這種情況下，img寬度設置爲100％，這意味着它總是佔據視口的100％寬度。有沒有一種方法可以將'內容'DIV垂直居中'DIV'？非常感謝你。我花了整整一天，仍然沒有發現。即使當我使用：

#contents 
    top: 50% 
    transform: translateY(-50%)

'contents'div取身體的高度，而不是'根'div。 :(

有沒有辦法，我可以解決此問題的方法嗎？謝謝！

來源

2017-04-02 Lan Mai

是，帶有[鬼元件]（http://stackoverflow.com/documentation/css/299/centering/4072/ghost-element-technique-micha%c5%82- czernows-hack＃t = 201704020728339892128） –

你與#contents {top：50％; transform：translateY（-50％）'}'。只需添加'#contents {display：absolute}'和'#root {position：relative}' – Alohci

.center_block{ 
 
\t position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    -ms-transform: translateX(-50%) translateY(-50%); 
 
    -webkit-transform: translate(-50%,-50%); 
 
    transform: translate(-50%,-50%); 
 
}

<div class="center_block"> 
 
    <div> 
 
    <h3>I am the one that need to be vertical centered.</h3> 
 
    <p>Lorem300..............</p> 
 
    </div> 
 
    <img scr="somewhere.jpg" class="img-responsive" /> 
 
</div>

來源

2017-04-02 07:56:00 Venkatachalam

您可以使用css flexbox幫助您居中#contents

只需設置#root與這些屬性

#root { 
    position: relative; /* needed to position img absolutely with div */ 
    display: flex; /* make this element flexbox */ 
    justify-content: center; /* horizontally center children */ 
    align-items: center; /* vertically center children */ 
}

然後給#contents和img這些性質

#contents { 
    position: relative; /* needed to set z-index */ 
    z-index: 2; /* make #contents above img */ 
} 

img { 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    height: 100%; 
}

參見this fiddle例如。您可以從上面的鏈接閱讀更多關於css flexbox的信息。

希望這有助於，

來源

2017-04-02 09:09:32 Anakin

垂直未知的高度DIV

回答

相關問題