Question

我是html和css的真正初学者，所以如果你们能给我一些见解会很棒！

我目前在我的个人网站上工作。我想要完成的是...... http://gyazo.com/741e08b227cb1e65f985bdd6b707815c（Photoshop）

彩色背景，高度和宽度均为100％，带有居中元素（应用图标，应用名称，应用说明）

这就是我现在所拥有的......

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;
}

我知道这个设计可能相当容易编码，但凭借我的技能，我很难垂直对齐和水平对齐我的元素。从其他具有相似设计的网站开始，我发现css称为＆＃34; box-sizing＆＃34;，但我不知道如何将其实现到我的代码中。如果有人可以提供帮助，那就太棒了！

Answer 1

你的CSS应该是这样的：

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

尝试以上它正在发挥作用。

将父div提供给：display: table;

修改

<强> 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; }

你可以在这里查看： http://jsfiddle.net/ketan156/22z6vjrx/5/

Answer 2

请试试这个：

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%;
}

100％高度和宽度背景内的垂直对齐

2 个答案: