定位一個div相對於其垂直中心

我有一個歡迎消息，它需要將其中心定位在窗口頂部25％處。因爲它可以是任意長度的線，所以需要使用垂直中心進行定位。這是我目前的。定位一個div相對於其垂直中心

.welcomeMessage { 
    position: absolute; 
    text-align: center; 
    vertical-align: middle; 
    display: inline-block; 
    margin: auto; 
    width: 60%; 
    top: 25%; 
}

我已使用顯示嘗試：內聯塊和顯示：中間但既不位置相對於它的垂直中心在div：與垂直對齊撓曲。任何幫助將不勝感激！

期望中的定位：當前位置：

來源

2017-08-08 jctwood

我已經編輯我的答案與兩個定位（你現在有一個和糾正的） – Ivan

在片段波紋管我有兩個要素，都與top: 25%和left: 50%設置爲position:absolute。

.element作爲transform: translate(-50%, -50%);允許他中心垂直和水平「精確」的頁面尺寸的在25％（高度，寬度）。因爲與top和left不同，transform屬性基於目標元素的大小。所以你設置的百分比是指目標邊界框的大小。
.other沒有一個transform規則，所以它不是定位像你希望它是，它的上邊框坐在25％

.element, 
 
.other { 
 
    position: absolute; 
 
    text-align: center; 
 
    top: 25%; 
 
    left: 50%; 
 
} 
 

 
.element { 
 
    transform: translate(-50%, -50%); 
 
    color: green; 
 
} 
 

 
.other { 
 
    color: red; 
 
} 
 
html,body{ 
 
    height:100%; 
 
    margin:0; 
 
    padding:0; 
 
}

<div class="element">I'm at 25% middle</div> 
 
<div class="other">I'm not at 25% middle</div>

來源

2017-08-08 10:19:01 Ivan

使用transform:translate(-50%);

margin: auto;不inline-block元素，所以你需要添加left:50%，使其水平居中。

html,body{ 
 
    height:100%; 
 
    margin:0; 
 
    padding:0; 
 
} 
 

 
.welcomeMessage { 
 
    position: absolute; 
 
    text-align: center; 
 
    vertical-align: middle; 
 
    display: inline-block; 
 
    left:50%; 
 
    width: 60%; 
 
    top: 25%; 
 
    transform:translate(-50%); 
 
}

<div class="welcomeMessage">Welcome Message</div>

來源

2017-08-08 10:12:18

爲什麼-75％而不是-50％？ –

@ManuelOtto更正 –

這也許應該工作。我將h1的尺寸定義爲2em，並計算出最高位置，以一半的字體大小減少25％。

.container { 
 
    width: 100vw; 
 
    height: 100vh; 
 
    background: lightgray; 
 
} 
 

 
.h1 { 
 
    font-size: 2em; 
 
} 
 

 
.welcomeMessage { 
 
    position: absolute; 
 
    text-align: center; 
 
    vertical-align: middle; 
 
    display: inline-block; 
 
    margin: auto; 
 
    width: 60%; 
 
    top: calc(25% - 1em) 
 
}

<div class="container"></div> 
 
<h1 class="welcomeMessage">Welcome</h1>

來源

2017-08-08 10:14:51 Gerard

定位一個div相對於其垂直中心

回答

相關問題