how to center a div in css
//HTML
<div class="parent">
<span>Hello World</span>
</div>
//CSS
.parent {
display: flex;
justify-content: center;
align-items: center;
}/* Answer to: "css vertical align middle" */
/*
Go to: https://www.w3schools.com/css/css_align.asp
Here you can learn many ways to align horizontal and vertically!
My favourite method is below:
*/
.center {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
border: 3px solid green;
}.parent {
position: relative;
}
.child {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}.class {
text-align: 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;
}.center
{
margin: auto;
width: 50%;
border: 3px solid green;
padding: 10px;
}