Need help with centering buttons.

I am working on a piano program. I need help formatting a line of buttons so that the line is vertically and horizontally centered. If you have an answer, please let me know.

You are viewing a single comment. View All
eankeen (979)


one quick and simple solution is the use of css flexboxes

on your parent object (which looks to be body), you would make it flex

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

the align-items: center; center aligns the #buttons div vertically
the justify-content: center; center aligns the #buttons div horizontally

be sure that your body and html tags take up the whole screen

html, body {
    height: 100%;
    width: 100%;

hope that helped :)


@eankeen Thanks for the solution!