html - 如何在一个div中垂直居中文本，重叠另一个div

Question

我有一个 CSS 问题。我试图将文本垂直居中放置在覆盖另一个 div 的 div 中，但文本不会移动。

编辑:这是 JSFiddle 网址:http://jsfiddle.net/wgSEw/3/

html如下:

<div id="footer-top">
            <div id="footer-top-left">
                <div id="footer-logo">
            </div>
            </div>
            <div id="footer-top-transition"></div>

        <div id="footer-top-right"></div>
        <div id="footer-top-bullets">
            <div id="site-map" class="footer-bullet">
                <img src="<?php echo BASE_IMG_URL . 'bulletlight.png'; ?>" alt="some_text">
                <span class="footer-bullet-text">Site Map</span>
            </div>
            <div id="report-issue" class="footer-bullet">
                <img src=<?php echo BASE_IMG_URL . 'bulletlight.png'; ?> alt="some_text">
                <span class="footer-bullet-text">Report an Issue</span>
            </div>
            <div id="submit-professor" class="footer-bullet">
                <img src=<?php echo BASE_IMG_URL . 'bulletblack.png'; ?> alt="some_text">
                <span class="footer-bullet-text">Submit Professor</span>
            </div>
            <div id="submit-school" class="footer-bullet">
                <img src=<?php echo BASE_IMG_URL . 'bulletblack.png'; ?> alt="some_text">
                <span class="footer-bullet-text">Submit a School</span>
            </div> 
        </div>
</div>

当前的CSS是:

#footer-top{
    position: relative;
    width: 960px;
    height: 63px;
    float: left;
    background-image:url('midtilefooter.png');
}

#footer-top-left{
    width: 466px;
    height: 63px;
    float: left;
}

#footer-logo{
    width: 265px;
    height: 63px;
    float: left;
    background-image:url('leftlogo.png');
}

#footer-top-transition{
    width: 27px;
    height: 63px;
    float: left;
    background-image: url('midblacktransition.png');
}

#footer-top-right{
    width: 467px;
    height: 63px;
    float: left;
    background-color: black;
}

#footer-top-bullets{
    position: absolute;
    float: left;
    width: 960px;
    height: 63px; 
    margin-left: 265px;
}

.footer-bullet{
    float: left;
    height: 63px;
    width: 173px;
    color: white;
}

.footer-bullet-text{
    height: 63px;
    color: white;
    top: 50%;
    margin-top: -31px;
    vertical-align: middle;
}

这实质上是为页脚的顶部创建一个基本背景，然后将一个元素符号 div 叠加到该背景上，这样它就不会遮挡或弄乱背景。元素符号显示在正确的位置，文本水平放置正确，但我根本无法将其垂直居中。任何帮助，以及关于 css 的任何一般建议，我将不胜感激，我对它很陌生，它让我为我的钱奔波。非常感谢!

Answer 1

使div垂直居中

html

 <div id="parent">
        <div id="child">Content here</div>
    </div>

CSS 选项 1

#parent {position: relative;}

#child {
    position: absolute;
    top: 50%;
    left: 50%;
    height: 30%;
    width: 50%;
    margin: -15% 0 0 -25%;
}

We begin by positioning both parent and child divs. Next we set the top and left values of the child to be 50% each, which would be the center of the parent. However this sets the top left corner to be in the center so we’re not done.

We need to move the child up (by half its height) and to the left (by half its width) so it’s center is what sits in the center of the parent element. This is why we need to know the height (and here the width) of the child element.

To do that we give the element a negative top and left margin equal to half its height and width.

Unlike the first 2 methods this one is meant for block level elements. It does work in all browsers, however the content can outgrow its container in which case it will disappear visually. It’ll work best when you know the heights and widths of the elements.

CSS 选项 2

#parent {position: relative;}

#child {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 50%;
    height: 30%;
    margin: auto;
}

The idea with this method is to try to get the child element to stretch to all 4 edges by setting the top, bottom, right, and left vales to 0. Because our child element is smaller than our parent elements it can’t reach all 4 edges.

Setting auto as the margin on all 4 sides however causes opposite margins to be equal and displays our child div in the center of the parent div.

Unfortunately the above won’t work in IE7 and below and like the previous method the content inside the child div can grow too large causing it to be hidden.

CSS 选项 3

#parent {
    padding: 5% 0;
}

#child {
    padding: 10% 0;
}

In the css above I’ve set top and bottom paddings on both elements. Setting it on the child will make sure the contents in the child will be vertically centered and setting it on the parent ensures the entire child is centered within the parent.

I’m using relative measurements to allow each div to grow dynamically. If one of the elements or it’s content needs to be set with an absolute measurement then you’ll need to do some math to make sure things add up.

For example if the parent was 400px in height and the child 100px in height we’d need 150px of padding on both the top and bottom.

150 + 150 + 100 = 400

Using % could throw things off in this case unless our % values corresponded to exactly 150px.

This method works anywhere. The downside is that depending on the specifics of your project you may need to do a little math. However if you’re falling in line with the idea of developing flexible layouts where your measurements are all relative you can avoid the math.

Note: This method works by setting paddings on the outer elements. You can flip things and instead set equal margins on the inner elements. I tend to use padding, but I’ve also used margins with success. Which you choose would depend on the specifics of your project.

source