+ 2
Flexbox
Please, does anyone know how i can align a div to the center of a html document
8 Respostas
+ 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;
}