Need help centering my calculator on the screen

Need help centering my calculator on the screen
0.0 0

#1

Hi guys! I have been trying the calculator challenge but after using display: inline-block to reduce the size of the calculator division, it is stuck to the left . Increasing the left-margin works but only on desktop view (It screws the mobile view ) . Can anyone help me with this??

Link - https://codepen.io/kshitij1234/pen/mmNmxL

Thank you in advance!!


#2

You can try this:

  • Give html, body, and the outermost .container a 100% height.
  • Make .container a flex container, then justify-content and align-items to center.

#3

Since you aren’t using bootstrap go with :
.calculator{position:absolute;
left:50%;
transform:translate(-50%,0);
margin-top: 10%;
margin-left: auto;
margin-right: auto;


#4

I advise you to get a tool like Bootstrap that you can learn quickly on FreeCodeCamp. It’s here : Responsive design with Bootstrap


#5

Thanks!!! Worked like a charm


#6

Actually I am using bootstrap


#7

Thanks!! This works too