Question

@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的新手。

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

这是我的代码，它非常混乱。

感谢您的评论！

Answer 1

此处，使用 - ＆gt; This Fiddle

那应该可以解决你的问题！

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

Answer 2

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

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

vertical-align：middle总是将内容准确地放在父元素的中间，无论它有什么大小。

此处示例： https://fiddle.jshell.net/ajL0tut6/2/

全屏背景垂直对齐

2 个答案: