New course! Every coder should learn Generative AI!
Try a free lesson+ 2
Flexbox
Please, does anyone know how i can align a div to the center of a html document
8 Answers
+ 10
Uche Victor
Hey I have aligned the div tag in the center of the html document below 👇🏻
https://code.sololearn.com/WTB6L82ybsVx/?ref=app
div
{
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
+ 8
✧ If you are trying to align div vertically and horizontally, you can use "Flex-box"
➜ HTML :
<body>
<div id="flexbox">
<div>Centered Div</div>
</div>
</body>
➜ CSS :
#flexbox{
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
✧ You can also use display: table-cell;
➜ HTML :
<body>
<div id="container">
<div id="center">Centered Div</div>
</div>
</body>
➜ CSS :
#container{
display: table;
width: 100%;
height:100vh;
}
#center{
text-align: center;
display: table-cell;
vertical-align: middle;
}
+ 4
Bob_Li
just one line difference 😄
+ 3
if you want to center in the html body, use
body{
height:100vh;
display: grid;
place-items: center;
}
+ 2
Sujal
grid is shorter....😁
+ 1
i'm lazy...😁
0
Follow This:
https://youtu.be/n0oGrTSAhHw
Hope it'll help!!!!
0
if you want to align in middle center:
body{
height: 100vh;
display: flex;
justify-content: center;
align-item: center;
}
Often have questions like this?
Learn more efficiently, for free:
