Purnima Kumar• 390
@purnimakumarr
Posted
Hi Hatem, There are 3 most effective & widely used ways to center an element (in this case, the QR code component) inside a container (in this case, the body).
- Using
positionproperty
<body>
<div class="container"></div>
</body>
body {
position: relative;
height: 100vh;
}
.container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
- Using CSS Flexbox
body {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
- Using CSS Grid
body {
height: 100vh;
display: grid;
place-items: center;
}
All 3 ways are correct and acceptable. You can read this article 11 Ways to Center Div or Text in CSS on Hub Spot to learn more on this topic.
0
