<分区>
<分区>
我试图将一个 div 放在页面中间，另一个放在页面末尾。
我明白了，但我无法将第一个放在中心。
我试过为 content_text 设置不同的 aling self，但我试过的都不起作用。
希望大家帮帮我。 :)
html,body{
height:100%;
margin:0;
}
.content {
align-items: center;
background: rgb(0, 0, 0); /* Fallback color */
background: rgba(0, 0, 0, 0.5); /* Black background with 0.5 opacity */
color: #f1f1f1; /* Grey text */
display: flex;
flex-direction: column;
height: 100vh;
justify-content: space-between;
position: absolute; /* Position the background text */
width: 100%; /* Full width */
}
/* HELPERS */
.img-bg {
display:block;
height:100%;
object-fit: cover;
width:100%;
}<!doctype html>
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Iraitz Puente</title>
</head>
<body>
<div class="row fullWidth">
<div class="content">
<div class="content_text">
<h1>THIS MUST BE CENTERED</h1>
</div>
<div class="content_arrow">
<h1>END</h1>
</div>
</div>
</div>
</body>
</html>最佳答案
如果你设置content为justify-content: flex-end;，那么你可以对需要的元素应用absolute定位居中，然后结合使用 top: 50% 和 transform: translateY(-50%); 将其居中:
html,body{
height:100%;
margin:0;
}
.content {
align-items: center;
background: rgb(0, 0, 0); /* Fallback color */
background: rgba(0, 0, 0, 0.5); /* Black background with 0.5 opacity */
color: #f1f1f1; /* Grey text */
display: flex;
flex-direction: column;
height: 100vh;
justify-content: flex-end;
position: absolute; /* Position the background text */
width: 100%; /* Full width */
}
.content_text {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
/* HELPERS */
.img-bg {
display:block;
height:100%;
object-fit: cover;
width:100%;
}<!doctype html>
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Iraitz Puente</title>
</head>
<body>
<div class="row fullWidth">
<div class="content">
<div class="content_text">
<h1>THIS MUST BE CENTERED</h1>
</div>
<div class="content_arrow">
<h1>END</h1>
</div>
</div>
</div>
</body>
</html>关于html - flex 盒定位，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53831733/