how to center div in div vertically and horizontally code example
Example 1: center div horizontally and vertically
.parent {
position: relative;
}
.child {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
Example 2: css center text in div
parent-element {text-align:center;}
parent-element {position: relative;}
element-to-be-centered {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
Example 3: how to center a div vertically and horizontally
.container{
margin: 0;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width:
height:
}
Example 4: css center vertically and horizontally
body {
display: flex;
min-height: 100vh;
flex-direction: column;
justify-content: center;
align-items: center;
}
Example 5: css align center
.center {
margin: auto;
width: 50%;
border: 3px solid green;
padding: 10px;
}
Example 6: how to center horizontally and vertically block div
#html code
<div class="parent">
<h1 class="child">CSS is cool</h1>
</div>
#css code
.parent{
display:grid;
place-items:center;
width:560px;
height: 560px;
}