全屏背景垂直对齐答案

【问题标题】：full screen background vertical align全屏背景垂直对齐
【发布时间】：2015-08-12 00:07:26
【问题描述】：

@charset "utf-8";
@import url(http://fonts.googleapis.com/css?family=Roboto:200,400,300,500,700);

html { 
  background: url(img/img1.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

body {
    margin: 0;
    padding: 0;
    font-family: 'Roboto', sans-serif;
}

*, *:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}


.top_nav ul {
    list-style: none;
    background-color: #333745;
    text-align: center;
    margin: 0;
    padding:0;
}

.top_nav li {
    height: 50px;
    line-height: 50px;
    border-bottom: 1px solid #fff;
    text-transform: uppercase;
    color: #000;;
    transition: background-color .5s;
}

.top_nav a {
    margin: 1.3em;
    text-decoration: none;
    font-size: 1em;
    color: #fff;
}

.top_nav li:hover {
    background-color: #ea2e49;
}

@media screen and (min-width: 600px) {
    .top_nav ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
    }
    .top_nav li {
        border: 0;
    }}

.box {
    height: 300px;
}

.center_elements {
    padding: 20px;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.center_elements p {
    font-size: .9em;
    font-weight: 200;
    color: #fff;
}

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>

<body>
    
<nav class="top_nav">
    <ul>
        <li class="home"><a href="#">home</a></li>
        <li class="menu1"><a href="#">menu1</a></li>
        <li class="menu2"><a href="#">menu2</a></li>
        <li class="menu3"><a href="#">menu3</a></li>
        <li class="menu4"><a href="#">menu4</a></li>        
    </ul>
 
</nav>

<div class="center_elements">
    <p>text</p>
    <button>LEARN MORE</button>
</div>
    
</body>
</html>

大家好。

我是 html 和 css 的新手。

我尝试在全屏背景图像上制作水平和垂直居中的元素。

这是我的代码，它很乱。

感谢你们的 cmets 伙计们！

【问题讨论】：

您究竟需要什么帮助？
这里是the jsfiddle，其中包含您的代码。我不明白你遇到什么问题...
我想把“center_elements”类放在我的背景图片的中心。谢谢。
你的意思是把所有带有那个标签的内容都放在屏幕的死角？
是的！正确的。内容和按钮。

标签： html css alignment

【解决方案1】：

在这里，使用 --> This Fiddle

这应该可以解决您的问题！

.center_elements {
background: none;
 bottom: 0;
 height: 100px;
 left: 0;
 margin: auto;
 position: absolute;
 top: 0;
 right: 0;
 width: 100px;
}

【讨论】：

【解决方案2】：

首先我宁愿为body标签设置背景图片，而不是html（这是我第一次看到html标签的背景图片，但可能是错误的）。

垂直对齐提示：将整个内容包装到包装器中并为其添加 css display: table, display: table-cell to child element + height 100vh（不完全支持 vh 属性）。

vertical-align: 无论大小如何，中间始终将内容准确地居中在父元素的中间。

这里的示例： https://fiddle.jshell.net/ajL0tut6/2/

【讨论】：