如何使用CSS

垂直對齊一個div我知道這已經被問過很多次，但我根本無法遵循這些其他主題的說明。沒有什麼似乎爲我工作。請檢查截圖以更好地瞭解我正在嘗試完成的內容。另外，我將我的代碼添加到了這篇文章中。謝謝！如何使用CSS

header { 
 
    width: 960px; 
 
    height: 90px; 
 
    margin: auto; 
 
    background-color: #000; 
 
} 
 

 
.logo { 
 
    float: left; 
 
    width: 209px; 
 
    height: 54px; 
 
    background-color: #ced0d8; 
 
}

<header> 
 
    <div class="logo"></div> 
 
</header>

來源

2016-01-20 Richard Rodgers

http://stackoverflow.com/a/31977476/3597276 –

方法1 使用position:relative;和top:50和transform: translateY(-50%)你可以得到它爲中心，這是那麼好，如果你不知道該元素的高度，像這樣：

Suppo rt：IE9 +和所有其他瀏覽器，caniuse.com。

JS Fiddle 1

header { 
 
    width: 960px; 
 
    height: 90px; 
 
    margin: auto; 
 
    background-color: #000; 
 
} 
 

 
.logo { 
 
    position:relative; 
 
    width: 209px; 
 
    height: 54px; 
 
    top:50%; 
 
    left:0; 
 
    transform: translateY(-50%); 
 
    background-color: #ced0d8; 
 
}

<header> 
 
    <div class="logo"></div> 
 
</header>

方法2：使用.calc() CSS功能，如果你知道元素的高度，這樣的：

支持：IE9 +和所有其他的瀏覽器，caniuse.com

JS Fiddle 2

header { 
 
    width: 960px; 
 
    height: 90px; 
 
    margin: auto; 
 
    background-color: #000; 
 
} 
 

 
.logo { 
 
    position:relative; 
 
    width: 209px; 
 
    height: 54px; 
 
    top:calc(50% - 27px); /* 50% parent height - 27px is half of 54px the height of .logo */ 
 
    left:0; 
 
    background-color: #ced0d8; 
 
}

<header> 
 
    <div class="logo"></div> 
 
</header>

方法3：，如果你知道這兩個元素的高度，你可以手動減去的一半高度.logo從父div的高度的一半，所以2分之90 - 54/2 = 18，如下所示：

支持：所有瀏覽器，caniuse.com。

JS Fiddle 3

header { 
 
    width: 960px; 
 
    height: 90px; 
 
    margin: auto; 
 
    background-color: #000; 
 
} 
 

 
.logo { 
 
    position:relative; 
 
    width: 209px; 
 
    height: 54px; 
 
    top:18px; /* 90/2 - 54/2 = 18 */ 
 
    left:0; 
 
    background-color: #ced0d8; 
 
}

<header> 
 
    <div class="logo"></div> 
 
</header>

來源

2016-01-20 23:54:32

非常感謝，所有的瀏覽器都支持這個功能嗎？ –

用瀏覽器支持更新了我的答案 –

此答案可以解答很多類似的問題。謝謝！ –

有很多方法可以垂直對齊的元素，但在這種情況下，如果你的<div>具有明確的高度，坐在父母<header>其中也有一個內部顯式高度，最簡單的方法之一 - 在過去的十五年中，所有瀏覽器都支持 - 是：

施加了相等的margin-top和margin-bottom。

header { 
 
    width: 960px; 
 
    height: 90px; 
 
    margin: auto; 
 
    background-color: #000; 
 
} 
 

 
.logo { 
 
    float: left; 
 
    width: 209px; 
 
    height: 54px; 
 
    margin-top: 18px; 
 
    margin-bottom: 18px; 
 
    background-color: #ced0d8; 
 
}

<header> 
 
    <div class="logo"></div> 
 
</header>

如何制定出了margin-top和margin-bottom應各自18px？

（高度<header>） - （的.logo高度）= 36px

36px/2 = 18px

來源

2016-01-20 23:54:47 Rounin

試試這個爲您的標誌類：

.logo { 
    position: relative; 
    top: 50%; 
    transform: translateY(-50%); 
    width: 209px; 
    height: 54px; 
    background-color: #ced0d8; 

}

來源

2016-01-20 23:58:05

你有沒有聽說過Flexbox的嗎？這很棒！試試這個：

header { 
    width: 960px; 
    height: 90px; 
    margin: auto; 
    background-color: #000; 
    display: flex; 
} 

.logo { 
    width: 209px; 
    height: 54px; 
    background-color: #ced0d8; 
    margin: auto 0; 
}

來源

2016-01-21 00:02:26 JoeMecPak

值得注意的，你也可以與flexbox容易做到這一點，就像這樣：

header { 
    width: 960px; 
    height: 90px; 
    background-color: #000; 
    display:flex; 
    justify-content: center; 
    align-items: center; 
} 

.logo { 
    width: 209px; 
    height: 54px; 
    background-color: #ced0d8; 
}

瀏覽器支持pretty good

來源

2016-01-21 00:04:47 Uzi

有一個3種方式來解決這個問題。

方法1：使用transform屬性。（IE9+ supported）

header { 
 
    width: 960px; 
 
    height: 90px; 
 
    margin: auto; 
 
    background-color: #000; 
 
} 
 

 
.logo { 
 
    float: left; 
 
    width: 209px; 
 
    height: 54px; 
 
    background-color: #ced0d8; 
 
    top:50%; 
 
    transform:translateY(-50%); 
 
    position:relative; 
 
}

<header> 
 
    <div class="logo"></div> 
 
</header>

方法2：使用flex財產。（IE10+ supported）

header { 
 
    width: 960px; 
 
    height: 90px; 
 
    margin: auto; 
 
    background-color: #000; 
 
    display:flex; 
 
    align-items: center; 
 
} 
 

 
.logo { 
 
    float: left; 
 
    width: 209px; 
 
    height: 54px; 
 
    background-color: #ced0d8; 
 
}

<header> 
 
    <div class="logo"></div> 
 
</header>

方法3：使用margin財產。（IE3+ supported）

header { 
 
    width: 960px; 
 
    height: 90px; 
 
    margin: auto; 
 
    background-color: #000; 
 
} 
 

 
.logo { 
 
    float: left; 
 
    width: 209px; 
 
    height: 54px; 
 
    background-color: #ced0d8; 
 
    margin-top: 18px; 
 
    /* (90px (header height) - 54px (logo height))/2 = 18px; */ 
 
}

<header> 
 
    <div class="logo"></div> 
 
</header>

來源

2016-01-21 00:19:48 Mystika

有使用絕對定位，如下所示一個巧妙的方法。

由於指定的高度和寬度爲.logo，可以使用margin: auto使其居中垂直和水平提供.logo絕對定位和所有偏移被設置爲零。

這依賴於CSS2規範，並將在不少瀏覽器中工作。

header { 
 
    width: 460px; /* narrow width for demo... */ 
 
    height: 90px; 
 
    margin: auto; 
 
    background-color: #000; 
 
    position: relative; 
 
} 
 
.logo { 
 
    position: absolute; 
 
    left: 0; right: 0; top: 0; bottom: 0; 
 
    margin: auto; 
 
    width: 209px; 
 
    height: 54px; 
 
    background-color: #ced0d8; 
 
}

<header> 
 
    <div class="logo"></div> 
 
</header>

來源

2016-01-21 00:30:58

剛玩的高度和你的頭的填充：

body { 
 
    margin : 0; 
 
} 
 

 
header { 
 
    width: 100%; 
 
    height: 54px; 
 
    margin: 0; 
 
    padding: 26px; 
 
    background-color: #000; 
 
} 
 

 
.logo { 
 
    display: block; 
 
    width: 209px; 
 
    height: 54px; 
 
    margin : auto; 
 
    background-color: #ced0d8; 
 
    border : 1px solid #000; 
 
}

<header> 
 
    <div class="logo"></div> 
 
</header>

參見this Fiddle！

來源

2016-01-21 00:46:03

回答

相關問題