在 Flexbox 中居中不起作用。什么是高度、宽度、显示和位置要求？我错过了什么？
Centering in Flexbox not working. What are height, width, display, and position requirements? What am I missing?
好的，我正在为 WP 中的博客存档页面设置样式，我 运行 遇到了 flexbox 问题。
我已经检查了很多类似的问题，但我似乎无法弄清楚我做错了什么。
编辑：这已被标记为重复。虽然这个网站上确实有很多帖子详细说明了人们在使用 flexbox 居中时遇到的问题，但这些解决方案对我没有用，而且我认为这是我的代码的某些特定问题导致了错误。
这也是为什么我在标题中明确询问flexbox是否有高度，宽度，显示或位置要求才能正常运行的原因之一，因为我使用min-width和min-height，而不是明确宽度和高度，我认为其他一些帖子可能是问题的一部分，但我找不到 flexbox 规范中详细说明该行为的部分。
这是我的代码的代码笔。
https://codepen.io/thedonquixotic/pen/yPGPmj
这是代码本身：
<section class=" blog-post-section container-fluid">
<a href="http://www.josvanriswick.com/images/apple-pear-stilllife_400.jpg">
<div class="img-container rellax" data-rellax-speed="-4">
<img class="section-img rellax" data-rellax-speed="-6" src="http://www.cashartblog.com/wp-content/uploads/2012/09/peppers7.jpg">
<polygon points="345.606,107.5 324.394,128.713 418.787,223.107 0,223.107 0,253.107 418.787,253.107 324.394,347.5 345.606,368.713 476.213,238.106 " fill="#FFFFFF">
</polygon></div>
<div class="title-card-flex">
<h1 class="class-study-title"> <span class="">Test Post Nietzsche</span></h1>
<p class="blog-summary"><span>War spirit strong sexuality will play right deceptions noble prejudice noble derive chaos. Burying disgust contradict passion overcome. Chaos play evil reason hope of overcome oneself pinnacle spirit enlightenment. Will ascetic ubermensch holiest superiority sea selfish pious law. Overcome selfish chaos snare convictions truth deceptions snare reason. Self noble salvation insofar god christian joy marvelous. […]</span></p>
</div>
</a>
</section>
<section class=" blog-post-section container-fluid">
<a href="http://www.josvanriswick.com/images/apple-pear-stilllife_400.jpg">
<div class="img-container rellax" data-rellax-speed="-4">
<img class="section-img rellax" data-rellax-speed="-6" src="http://www.cashartblog.com/wp-content/uploads/2012/09/peppers7.jpg">
<polygon points="345.606,107.5 324.394,128.713 418.787,223.107 0,223.107 0,253.107 418.787,253.107 324.394,347.5 345.606,368.713 476.213,238.106 " fill="#FFFFFF">
</polygon></div>
<div class="title-card-flex">
<h1 class="class-study-title"> <span class="">Test Post Nietzsche</span></h1>
<p class="blog-summary"><span>War spirit strong sexuality will play right deceptions noble prejudice noble derive chaos. Burying disgust contradict passion overcome. Chaos play evil reason hope of overcome oneself pinnacle spirit enlightenment. Will ascetic ubermensch holiest superiority sea selfish pious law. Overcome selfish chaos snare convictions truth deceptions snare reason. Self noble salvation insofar god christian joy marvelous. […]</span></p>
</div>
</a>
</section>
<section class=" blog-post-section container-fluid">
<a href="http://www.josvanriswick.com/images/apple-pear-stilllife_400.jpg">
<div class="img-container rellax" data-rellax-speed="-4">
<img class="section-img rellax" data-rellax-speed="-6" src="http://www.cashartblog.com/wp-content/uploads/2012/09/peppers7.jpg">
<polygon points="345.606,107.5 324.394,128.713 418.787,223.107 0,223.107 0,253.107 418.787,253.107 324.394,347.5 345.606,368.713 476.213,238.106 " fill="#FFFFFF">
</polygon></div>
<div class="title-card-flex">
<h1 class="class-study-title"> <span class="">Test Post Nietzsche</span></h1>
<p class="blog-summary"><span>War spirit strong sexuality will play right deceptions noble prejudice noble derive chaos. Burying disgust contradict passion overcome. Chaos play evil reason hope of overcome oneself pinnacle spirit enlightenment. Will ascetic ubermensch holiest superiority sea selfish pious law. Overcome selfish chaos snare convictions truth deceptions snare reason. Self noble salvation insofar god christian joy marvelous. […]</span></p>
</div>
</a>
</section>
<section class=" blog-post-section container-fluid">
<a href="http://www.josvanriswick.com/images/apple-pear-stilllife_400.jpg">
<div class="img-container rellax" data-rellax-speed="-4">
<img class="section-img rellax" data-rellax-speed="-6" src="http://www.cashartblog.com/wp-content/uploads/2012/09/peppers7.jpg">
<polygon points="345.606,107.5 324.394,128.713 418.787,223.107 0,223.107 0,253.107 418.787,253.107 324.394,347.5 345.606,368.713 476.213,238.106 " fill="#FFFFFF">
</polygon></div>
<div class="title-card-flex">
<h1 class="class-study-title"> <span class="">Test Post Nietzsche</span></h1>
<p class="blog-summary"><span>War spirit strong sexuality will play right deceptions noble prejudice noble derive chaos. Burying disgust contradict passion overcome. Chaos play evil reason hope of overcome oneself pinnacle spirit enlightenment. Will ascetic ubermensch holiest superiority sea selfish pious law. Overcome selfish chaos snare convictions truth deceptions snare reason. Self noble salvation insofar god christian joy marvelous. […]</span></p>
</div>
</a>
</section>
<section class=" blog-post-section container-fluid">
<a href="http://www.josvanriswick.com/images/apple-pear-stilllife_400.jpg">
<div class="img-container rellax" data-rellax-speed="-4">
<img class="section-img rellax" data-rellax-speed="-6" src="http://www.cashartblog.com/wp-content/uploads/2012/09/peppers7.jpg">
<polygon points="345.606,107.5 324.394,128.713 418.787,223.107 0,223.107 0,253.107 418.787,253.107 324.394,347.5 345.606,368.713 476.213,238.106 " fill="#FFFFFF">
</polygon></div>
<div class="title-card-flex">
<h1 class="class-study-title"> <span class="">Test Post Nietzsche</span></h1>
<p class="blog-summary"><span>War spirit strong sexuality will play right deceptions noble prejudice noble derive chaos. Burying disgust contradict passion overcome. Chaos play evil reason hope of overcome oneself pinnacle spirit enlightenment. Will ascetic ubermensch holiest superiority sea selfish pious law. Overcome selfish chaos snare convictions truth deceptions snare reason. Self noble salvation insofar god christian joy marvelous. […]</span></p>
</div>
</a>
</section>
<section class=" blog-post-section container-fluid">
<a href="http://www.josvanriswick.com/images/apple-pear-stilllife_400.jpg">
<div class="img-container rellax" data-rellax-speed="-4">
<img class="section-img rellax" data-rellax-speed="-6" src="http://www.cashartblog.com/wp-content/uploads/2012/09/peppers7.jpg">
<polygon points="345.606,107.5 324.394,128.713 418.787,223.107 0,223.107 0,253.107 418.787,253.107 324.394,347.5 345.606,368.713 476.213,238.106 " fill="#FFFFFF">
</polygon></div>
<div class="title-card-flex">
<h1 class="class-study-title"> <span class="">Test Post Nietzsche</span></h1>
<p class="blog-summary"><span>War spirit strong sexuality will play right deceptions noble prejudice noble derive chaos. Burying disgust contradict passion overcome. Chaos play evil reason hope of overcome oneself pinnacle spirit enlightenment. Will ascetic ubermensch holiest superiority sea selfish pious law. Overcome selfish chaos snare convictions truth deceptions snare reason. Self noble salvation insofar god christian joy marvelous. […]</span></p>
</div>
</a>
section.blog-post-section {
width: 100%;
position: relative;
min-height: 450px;
overflow: hidden;
z-index: 2000;
padding: 0px;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
a {
height: 100%;
width: 100%;
text-decoration: none;
z-index: 5000;
cursor: pointer !important;
display: flex;
flex: 1;
div.overlay {
position: absolute;
z-index: 3000;
width: 100%;
height: 100%;
box-shadow: rgba(0, 0, 0, 0.8) 3px 3px 10px inset;
background: linear-gradient(rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.5));
}
//end overlay container
div.img-container {
position: absolute;
display: flex;
min-width: 50%;
min-height: 100%;
display: flex;
justify-content: center;
align-items: center;
img.section-img {
position: relative;
min-width: 100%;
min-height: calc(100% + 200px);
z-index: 2000 !important;
filter: blur(2px);
top: -100px;
right: 0;
margin: 0 auto;
}
svg {
float: right;
background-color: black;
}
}
//end image container
div.title-card-flex {
padding: 50px;
position: absolute;
height: 100%;
width: calc(50% - 100px);
flex-direction: column;
justify-content: left;
align-items: flex-start;
z-index: 4000;
background: white;
h1 {
position: relative;
background-color: black;
font-family: 'AllerBold', Arial, sans-serif;
color: white;
text-align: left;
text-shadow: 0 2px 2px rgba(0, 0, 0, .35);
max-width: 90vw;
margin: 50px 10px 25px 50px;
padding: 10px;
z-index: 4000;
user-select: none;
cursor: pointer !important;
font-size: 3.5vmax;
font-size: 25px;
}
p.blog-summary {
display: block;
position: relative;
padding: 5px;
margin: 25px 10px 45px 50px;
font-family: 'Aller', Arial, sans-serif;
color: white;
text-align: left;
text-shadow: 0 2px 2px rgba(0, 0, 0, .35);
z-index: 4000;
user-select: none;
cursor: pointer !important;
line-height: 1.4;
font-size: 18px;
margin-bottom: 10px;
span {
background-color: black;
box-shadow: 0.2em 0 0 rgba(black, 1), -0.2em 0 0 rgba(black, 1);
display: inline;
}
}
//svg {
// float: right;
// background-color: black;
//}
}
}
}
section.blog-post-section:nth-child(even) {
div.img-container{
right: 0px;
}
}
section.blog-post-section:nth-child(odd) {
div.title-card-flex {
right: 0px;
}
}
/*
* hor align
*/
align-items: center;
/*
* vertical align
*/
justify-content: center
也许你想要这样的东西。
好的，我正在为 WP 中的博客存档页面设置样式，我 运行 遇到了 flexbox 问题。
我已经检查了很多类似的问题，但我似乎无法弄清楚我做错了什么。
编辑：这已被标记为重复。虽然这个网站上确实有很多帖子详细说明了人们在使用 flexbox 居中时遇到的问题，但这些解决方案对我没有用，而且我认为这是我的代码的某些特定问题导致了错误。
这也是为什么我在标题中明确询问flexbox是否有高度，宽度，显示或位置要求才能正常运行的原因之一，因为我使用min-width和min-height，而不是明确宽度和高度，我认为其他一些帖子可能是问题的一部分，但我找不到 flexbox 规范中详细说明该行为的部分。
这是我的代码的代码笔。
https://codepen.io/thedonquixotic/pen/yPGPmj
这是代码本身：
<section class=" blog-post-section container-fluid">
<a href="http://www.josvanriswick.com/images/apple-pear-stilllife_400.jpg">
<div class="img-container rellax" data-rellax-speed="-4">
<img class="section-img rellax" data-rellax-speed="-6" src="http://www.cashartblog.com/wp-content/uploads/2012/09/peppers7.jpg">
<polygon points="345.606,107.5 324.394,128.713 418.787,223.107 0,223.107 0,253.107 418.787,253.107 324.394,347.5 345.606,368.713 476.213,238.106 " fill="#FFFFFF">
</polygon></div>
<div class="title-card-flex">
<h1 class="class-study-title"> <span class="">Test Post Nietzsche</span></h1>
<p class="blog-summary"><span>War spirit strong sexuality will play right deceptions noble prejudice noble derive chaos. Burying disgust contradict passion overcome. Chaos play evil reason hope of overcome oneself pinnacle spirit enlightenment. Will ascetic ubermensch holiest superiority sea selfish pious law. Overcome selfish chaos snare convictions truth deceptions snare reason. Self noble salvation insofar god christian joy marvelous. […]</span></p>
</div>
</a>
</section>
<section class=" blog-post-section container-fluid">
<a href="http://www.josvanriswick.com/images/apple-pear-stilllife_400.jpg">
<div class="img-container rellax" data-rellax-speed="-4">
<img class="section-img rellax" data-rellax-speed="-6" src="http://www.cashartblog.com/wp-content/uploads/2012/09/peppers7.jpg">
<polygon points="345.606,107.5 324.394,128.713 418.787,223.107 0,223.107 0,253.107 418.787,253.107 324.394,347.5 345.606,368.713 476.213,238.106 " fill="#FFFFFF">
</polygon></div>
<div class="title-card-flex">
<h1 class="class-study-title"> <span class="">Test Post Nietzsche</span></h1>
<p class="blog-summary"><span>War spirit strong sexuality will play right deceptions noble prejudice noble derive chaos. Burying disgust contradict passion overcome. Chaos play evil reason hope of overcome oneself pinnacle spirit enlightenment. Will ascetic ubermensch holiest superiority sea selfish pious law. Overcome selfish chaos snare convictions truth deceptions snare reason. Self noble salvation insofar god christian joy marvelous. […]</span></p>
</div>
</a>
</section>
<section class=" blog-post-section container-fluid">
<a href="http://www.josvanriswick.com/images/apple-pear-stilllife_400.jpg">
<div class="img-container rellax" data-rellax-speed="-4">
<img class="section-img rellax" data-rellax-speed="-6" src="http://www.cashartblog.com/wp-content/uploads/2012/09/peppers7.jpg">
<polygon points="345.606,107.5 324.394,128.713 418.787,223.107 0,223.107 0,253.107 418.787,253.107 324.394,347.5 345.606,368.713 476.213,238.106 " fill="#FFFFFF">
</polygon></div>
<div class="title-card-flex">
<h1 class="class-study-title"> <span class="">Test Post Nietzsche</span></h1>
<p class="blog-summary"><span>War spirit strong sexuality will play right deceptions noble prejudice noble derive chaos. Burying disgust contradict passion overcome. Chaos play evil reason hope of overcome oneself pinnacle spirit enlightenment. Will ascetic ubermensch holiest superiority sea selfish pious law. Overcome selfish chaos snare convictions truth deceptions snare reason. Self noble salvation insofar god christian joy marvelous. […]</span></p>
</div>
</a>
</section>
<section class=" blog-post-section container-fluid">
<a href="http://www.josvanriswick.com/images/apple-pear-stilllife_400.jpg">
<div class="img-container rellax" data-rellax-speed="-4">
<img class="section-img rellax" data-rellax-speed="-6" src="http://www.cashartblog.com/wp-content/uploads/2012/09/peppers7.jpg">
<polygon points="345.606,107.5 324.394,128.713 418.787,223.107 0,223.107 0,253.107 418.787,253.107 324.394,347.5 345.606,368.713 476.213,238.106 " fill="#FFFFFF">
</polygon></div>
<div class="title-card-flex">
<h1 class="class-study-title"> <span class="">Test Post Nietzsche</span></h1>
<p class="blog-summary"><span>War spirit strong sexuality will play right deceptions noble prejudice noble derive chaos. Burying disgust contradict passion overcome. Chaos play evil reason hope of overcome oneself pinnacle spirit enlightenment. Will ascetic ubermensch holiest superiority sea selfish pious law. Overcome selfish chaos snare convictions truth deceptions snare reason. Self noble salvation insofar god christian joy marvelous. […]</span></p>
</div>
</a>
</section>
<section class=" blog-post-section container-fluid">
<a href="http://www.josvanriswick.com/images/apple-pear-stilllife_400.jpg">
<div class="img-container rellax" data-rellax-speed="-4">
<img class="section-img rellax" data-rellax-speed="-6" src="http://www.cashartblog.com/wp-content/uploads/2012/09/peppers7.jpg">
<polygon points="345.606,107.5 324.394,128.713 418.787,223.107 0,223.107 0,253.107 418.787,253.107 324.394,347.5 345.606,368.713 476.213,238.106 " fill="#FFFFFF">
</polygon></div>
<div class="title-card-flex">
<h1 class="class-study-title"> <span class="">Test Post Nietzsche</span></h1>
<p class="blog-summary"><span>War spirit strong sexuality will play right deceptions noble prejudice noble derive chaos. Burying disgust contradict passion overcome. Chaos play evil reason hope of overcome oneself pinnacle spirit enlightenment. Will ascetic ubermensch holiest superiority sea selfish pious law. Overcome selfish chaos snare convictions truth deceptions snare reason. Self noble salvation insofar god christian joy marvelous. […]</span></p>
</div>
</a>
</section>
<section class=" blog-post-section container-fluid">
<a href="http://www.josvanriswick.com/images/apple-pear-stilllife_400.jpg">
<div class="img-container rellax" data-rellax-speed="-4">
<img class="section-img rellax" data-rellax-speed="-6" src="http://www.cashartblog.com/wp-content/uploads/2012/09/peppers7.jpg">
<polygon points="345.606,107.5 324.394,128.713 418.787,223.107 0,223.107 0,253.107 418.787,253.107 324.394,347.5 345.606,368.713 476.213,238.106 " fill="#FFFFFF">
</polygon></div>
<div class="title-card-flex">
<h1 class="class-study-title"> <span class="">Test Post Nietzsche</span></h1>
<p class="blog-summary"><span>War spirit strong sexuality will play right deceptions noble prejudice noble derive chaos. Burying disgust contradict passion overcome. Chaos play evil reason hope of overcome oneself pinnacle spirit enlightenment. Will ascetic ubermensch holiest superiority sea selfish pious law. Overcome selfish chaos snare convictions truth deceptions snare reason. Self noble salvation insofar god christian joy marvelous. […]</span></p>
</div>
</a>
section.blog-post-section {
width: 100%;
position: relative;
min-height: 450px;
overflow: hidden;
z-index: 2000;
padding: 0px;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
a {
height: 100%;
width: 100%;
text-decoration: none;
z-index: 5000;
cursor: pointer !important;
display: flex;
flex: 1;
div.overlay {
position: absolute;
z-index: 3000;
width: 100%;
height: 100%;
box-shadow: rgba(0, 0, 0, 0.8) 3px 3px 10px inset;
background: linear-gradient(rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.5));
}
//end overlay container
div.img-container {
position: absolute;
display: flex;
min-width: 50%;
min-height: 100%;
display: flex;
justify-content: center;
align-items: center;
img.section-img {
position: relative;
min-width: 100%;
min-height: calc(100% + 200px);
z-index: 2000 !important;
filter: blur(2px);
top: -100px;
right: 0;
margin: 0 auto;
}
svg {
float: right;
background-color: black;
}
}
//end image container
div.title-card-flex {
padding: 50px;
position: absolute;
height: 100%;
width: calc(50% - 100px);
flex-direction: column;
justify-content: left;
align-items: flex-start;
z-index: 4000;
background: white;
h1 {
position: relative;
background-color: black;
font-family: 'AllerBold', Arial, sans-serif;
color: white;
text-align: left;
text-shadow: 0 2px 2px rgba(0, 0, 0, .35);
max-width: 90vw;
margin: 50px 10px 25px 50px;
padding: 10px;
z-index: 4000;
user-select: none;
cursor: pointer !important;
font-size: 3.5vmax;
font-size: 25px;
}
p.blog-summary {
display: block;
position: relative;
padding: 5px;
margin: 25px 10px 45px 50px;
font-family: 'Aller', Arial, sans-serif;
color: white;
text-align: left;
text-shadow: 0 2px 2px rgba(0, 0, 0, .35);
z-index: 4000;
user-select: none;
cursor: pointer !important;
line-height: 1.4;
font-size: 18px;
margin-bottom: 10px;
span {
background-color: black;
box-shadow: 0.2em 0 0 rgba(black, 1), -0.2em 0 0 rgba(black, 1);
display: inline;
}
}
//svg {
// float: right;
// background-color: black;
//}
}
}
}
section.blog-post-section:nth-child(even) {
div.img-container{
right: 0px;
}
}
section.blog-post-section:nth-child(odd) {
div.title-card-flex {
right: 0px;
}
}
/*
* hor align
*/
align-items: center;
/*
* vertical align
*/
justify-content: center
也许你想要这样的东西。