Vertical Alignment inside 100% Height and Width Background

问题

I'm a real beginner at html and css so it will be great if you guys can give me some insight!

I'm currently working on my personal website. What I want to accomplish is something like this... http://gyazo.com/741e08b227cb1e65f985bdd6b707815c (Photoshop)

A colored background with 100% height and width, with centered elements (app icon, app name, app description)

This is what I currently have...

HTML
<section id="app">
    <div>
        <h2>app</h2>
        <p>This is a sample description <br> for an iOS application.<p>
    <div>
</section>

CSS
#app {
    height: 100vh;
    width: 100vw;
    background-color: #28D9F9;
}

I know this design might be fairly easy to code, but with my skill set I am having a hard time vertical aligning and horizontal aligning my elements. From poking around other sites with similar designs, I found css called "box-sizing", but I have no clue how to implement this into my code. If anyone can help, that will be great!

回答1:

Your css should be like:

#app {
    height: 100vh;
    width: 100vw;
    background-color: #28D9F9;
     vertical-align:middle;
    text-align: center;
    display: table-cell;
}

try above it is working.

Give parent div to: display: table;

edit:

HTML:

    <div class="icn">
        <img src="app.png" />
    </div>
    <div class="txt">
        <h2>app</h2>
        <p>This is a sample description <br> for an iOS application.<p>
    <div>

CSS:

.icn{
   display:inline-block;  
}

.txt{
    display:inline-block;  
}

You can check it here: http://jsfiddle.net/ketan156/22z6vjrx/5/

回答2:

Pls try this :

http://jsfiddle.net/zj9v81t7/22/

#app {
    height: 100vh;
    width: 100vw;
    background-color: #28D9F9;
}#app > div {
    left: 50%;
    margin-left: -80px;
    margin-top: -42px;
    position: absolute;
    top: 50%;
}

来源：https://stackoverflow.com/questions/28292217/vertical-alignment-inside-100-height-and-width-background

标签

html

css

responsive-design

center

vertical-alignment