+ 2

Flexbox

Please, does anyone know how i can align a div to the center of a html document

6th Sep 2022, 12:24 AM
Uche Victor
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%); }
6th Sep 2022, 2:15 AM
Suparna Das
Suparna Das - avatar
+ 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; }
6th Sep 2022, 10:15 AM
Sujal
Sujal - avatar
+ 4
Bob_Li just one line difference 😄
6th Sep 2022, 11:28 AM
Sujal
Sujal - avatar
+ 3
if you want to center in the html body, use body{ height:100vh; display: grid; place-items: center; }
6th Sep 2022, 4:56 AM
Bob_Li
Bob_Li - avatar
+ 2
Sujal grid is shorter....😁
6th Sep 2022, 10:18 AM
Bob_Li
Bob_Li - avatar
+ 1
i'm lazy...😁
6th Sep 2022, 11:52 AM
Bob_Li
Bob_Li - avatar
0
Follow This: https://youtu.be/n0oGrTSAhHw Hope it'll help!!!!
7th Sep 2022, 6:56 AM
â›ˆïžđ•Ÿđ–šđ–’đ–† đ•­đ–†đ–˜đ–†đ–â„ïž
â›ˆïžđ•Ÿđ–šđ–’đ–† đ•­đ–†đ–˜đ–†đ–â„ïž - avatar
0
if you want to align in middle center: body{ height: 100vh; display: flex; justify-content: center; align-item: center; }
7th Sep 2022, 1:35 PM
Sakib Ahmed
Sakib Ahmed - avatar