How do i center everything?

Question

I have made a really simple calculator, but it being on the top right of the screen makes it look weird. Vertical-align does not work and text-align only works for the text box. How do i make all the buttons centered in the screen???

I put all of the buttons and stuff inside a div called main. How do i center that div vertically and horizontally?

I could manually position it by giving some px values to the left and top but it would not work different screens. I want to make it in a way that it remains centered in a huge variety of screens.

Simply use: `display: flex;` `align-items: center;` `justify-content: center;` in your parent div and your children will be centered — Andus, Jun 02 '20 at 07:15
Please add some code, though this can help: https://www.w3schools.com/css/css_align.asp — horse, Jun 02 '20 at 07:17

score 0 · Answer 1 · answered Jun 02 '20 at 07:16

0

You can easily do this with flex-box features.
try this:

display: flex;
align-items: center;
justify-content: center;

answered Jun 02 '20 at 07:16

Abdollahzadeh Ghalejoghi

360
1
5

score -1 · Answer 2 · answered Jun 02 '20 at 07:31

-1

U can do it by flex

display:flex;
align-items:center;
Justify-content:center;

Or

display:inline-block;
margin: auto;

It will do.

answered Jun 02 '20 at 07:31

Suresh Choudhary

27
5

How do i center everything?

2 Answers2