How do I insert a rectangle in the center of a screen ? | Sololearn: Learn to code for FREE!
New course! Every coder should learn Generative AI!
Try a free lesson
+ 2

How do I insert a rectangle in the center of a screen ?

26th May 2020, 3:22 PM
⚛️⚛️👨‍🔬👨‍💻 ADHIKSIT 👨‍💻👨‍🔬⚛️⚛️
⚛️⚛️👨‍🔬👨‍💻 ADHIKSIT 👨‍💻👨‍🔬⚛️⚛️ - avatar
8 Answers
+ 2
Use margin:0 auto ; in your css. To horizontally center the elements
26th May 2020, 3:58 PM
Ayush Kumar
Ayush Kumar - avatar
+ 2
Thanks a lot Ayush
26th May 2020, 3:58 PM
⚛️⚛️👨‍🔬👨‍💻 ADHIKSIT 👨‍💻👨‍🔬⚛️⚛️
⚛️⚛️👨‍🔬👨‍💻 ADHIKSIT 👨‍💻👨‍🔬⚛️⚛️ - avatar
+ 2
There are so many ways , refer this https://youtu.be/AXc1N4S0Vck
26th May 2020, 4:01 PM
anjit pariyar
anjit pariyar - avatar
+ 2
.rectangle{ width:200px; height:300px; background-color:#000000; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); } This css code will definitely work for putting rectangle in the center.
28th May 2020, 11:28 AM
Dinesh Kuniyal
Dinesh Kuniyal - avatar
+ 1
I will use and see if it's working thanks
26th May 2020, 3:58 PM
⚛️⚛️👨‍🔬👨‍💻 ADHIKSIT 👨‍💻👨‍🔬⚛️⚛️
⚛️⚛️👨‍🔬👨‍💻 ADHIKSIT 👨‍💻👨‍🔬⚛️⚛️ - avatar
+ 1
😊😊😊😊😊
26th May 2020, 3:58 PM
⚛️⚛️👨‍🔬👨‍💻 ADHIKSIT 👨‍💻👨‍🔬⚛️⚛️
⚛️⚛️👨‍🔬👨‍💻 ADHIKSIT 👨‍💻👨‍🔬⚛️⚛️ - avatar
+ 1
Thanks a lot for your help njay😊😊😊
27th May 2020, 5:34 AM
⚛️⚛️👨‍🔬👨‍💻 ADHIKSIT 👨‍💻👨‍🔬⚛️⚛️
⚛️⚛️👨‍🔬👨‍💻 ADHIKSIT 👨‍💻👨‍🔬⚛️⚛️ - avatar
- 1
This is a classic and tricky problem. Maybe this will help. HTML <div class='centered'> </div> CSS .centered { position: fixed; top: 50%; left: 50%; margin-top: -50px; margin-left: -100px; border-style:solid; height:200px; width:200px; }
26th May 2020, 8:01 PM
njay
njay - avatar