如何在窗口中垂直和水平对齐文本？

Question

I'm trying to center align the text both vertically and horizontally within a div in the window, and I want it to work on both portrait and landscape modes on the iPhone. Here is my code but it don't work well.

HTML:

<div class="mainTeaser">
    <img src="teaser.jpg" />
    <span class="teaserWrap">
        <span class="headline">TEXT</span>
        <span class="subline">TEXT</span>
    </span>
</div>

CSS:

.mainTeaser {
    position: relative;
}
.mainTeaser img {
    display: block;
    width: 100%;
}
.mainTeaser .teaserWrap {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
}

Answer 1

I would suggest to use background image instead, with background-size:cover , and use transform for centering the text.

You'll also need to set all the containers to height:100% , so it covers the entire viewport height.

 html, body { height :100%; margin: 0; } .mainTeaser { position: relative; height :100%; } .mainTeaser { background: url("http://lorempixel.com/300/300/nature") center center no-repeat; background-size: cover; } .mainTeaser .teaserWrap { display: block; position: absolute; top: 50%; left: 50%; -webkit-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); background: white; } 

 <div class="mainTeaser"> <span class="teaserWrap"> <span class="headline">TEXT</span> <span class="subline">TEXT</span> </span> </div> 

Answer 2

for Absolute to behave in that manner it needs predefined width's and height's

see bellow in this version i just made the absolute div width 100% with text align center it leaves a little less room for error when it comes to fixed size's

 html, body { height: 100%; min-height: 100%; } .mainTeaser { position: relative; height: 100%; background-color: red; width: 100%; text-align: center; } .align { position: absolute; top: 0px; bottom: 0px; margin: auto; width: 100%; height: 35px; } .mainTeaser img { display: block; width: 100%; } .mainTeaser .teaserWrap {} 

 <div class="mainTeaser"> <div class="align"> <img src="teaser.jpg" /> <span class="teaserWrap"> <span class="headline">TEXT</span> <span class="subline">TEXT</span> </span> </div> </div>