.container {
display: flex;
justify-content: center;
align-items: center;
}
/* For horizontal align: */
parent-element {text-align:center;}
/* For horizontal and vertical align: */
parent-element {position: relative;}
element-to-be-centered {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
/* See https://www.w3schools.com/css/css_align.asp for more info */
// add to the parent element
.parent{
height:100vh;
display:flex;
justify-content: center;
align-items: center;
}
or you can use
// add to the parent element
.parent{
height:100vh;
display:gird;
place-item:center;
}
/* html */
<h1>Centering with CSS</h1>
<h3>Text-Align Method</h3>
<div class="blue-square-container">
<div class="blue-square"></div>
</div>
<h3>Margin Auto Method</h3>
<div class="yellow-square"></div>
<h3>Absolute Positioning Method</h3>
<div class="green-square"></div>
/* css */
h1,
h3 {
text-align: center;
}
.blue-square-container {
text-align: center;
}
.blue-square {
background-color: #0074D9;
width: 100px;
height: 100px;
display: inline-block;
}
<div class="container">
<div class="child"></div>
</div>
.container {
...
display: flex;
justify-content: center;
}