How to align items to center with flexbox [duplicate] - html

Question

This question already has answers here:
Bootstrap Center Vertical and Horizontal Alignment
(17 answers)
Closed 2 years ago.
I'm creating a showcase with bootstrap 4. I want the showcase content to be centered.
so I'm using flexbox with align-items: center;. but for some reason it's not working.
Can some please explain what am I doing wrong?
#showcase {
position: relative;
background: url("https://source.unsplash.com/random") no-repeat center center/cover;
min-height: 350px;
}
#showcase .overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
}
#showcase .showcase-content {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
max-width: 540px;
height: 100%;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<header id="showcase" class="py-5">
<div class="overlay text-white text-center">
<div class="container">
<div class="showcase-content">
<h1 class="h2 mb-4">My Heading will go here</h1>
<div class="header-search w-100">
<form action="" method="get">
<input
type="search"
name="query"
placeholder="My input place holder"
id="query"
class="form-control"
/>
</form>
</div>
</div>
</div>
</div>
</header>

Answer 1

Your container class was not endowed with css rules. So I added flex to it to center it vertically using the justify-content: center rule. And in order to center it vertically, you need to add the rule height: 100%, since the child selector #showcase .showcase-content already contains flex rules, and it makes no sense to prescribe an align-item: center.
Add this selector to your css:
.container {
display: flex;
justify-content: center;
height: 100%;
}
#showcase {
position: relative;
background: url("https://source.unsplash.com/random") no-repeat center center/cover;
min-height: 350px;
}
#showcase .overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
}
#showcase .showcase-content {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
max-width: 540px;
height: 100%;
}
.container {
display: flex;
justify-content: center;
height: 100%;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<header id="showcase" class="py-5">
<div class="overlay text-white text-center">
<div class="container">
<div class="showcase-content">
<h1 class="h2 mb-4">My Heading will go here</h1>
<div class="header-search w-100">
<form action="" method="get">
<input
type="search"
name="query"
placeholder="My input place holder"
id="query"
class="form-control"
/>
</form>
</div>
</div>
</div>
</div>
</header>
Second solution:
#showcase {
position: relative;
background: url("https://source.unsplash.com/random") no-repeat center center/cover;
min-height: 350px;
}
#showcase .overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
}
#showcase .showcase-content {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
max-width: 540px;
height: 100%;
margin: auto; /*add this it*/
}
.container {
height: 100%; /*add this it*/
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<header id="showcase" class="py-5">
<div class="overlay text-white text-center">
<div class="container">
<div class="showcase-content">
<h1 class="h2 mb-4">My Heading will go here</h1>
<div class="header-search w-100">
<form action="" method="get">
<input
type="search"
name="query"
placeholder="My input place holder"
id="query"
class="form-control"
/>
</form>
</div>
</div>
</div>
</div>
</header>

Answer 2

You can give margin: auto; to your showcase-content class or you can give this style to your container:
.container {
display: flex;
align-items: center;
justify-content: center;
}
But because of you use bootstrap maybe this tip interrupt another codes, so you should make another container for you showcase-content into the container like this:
<div class="container">
<div class="show-case-container">
<div class="showcase-content">
</div></div></div>