✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
⚡️ Concerned about the grid? Kyle Baranko teaches how to predicting peak loads using XGBoost. Register for the August webinar!

Center a login page - Css styling trouble

Hi I am having quite a lot of trouble centering my login page, all the functionality works perfectly but I am struggling with the layout. Any help would be massively appreciated!

What I would like:
Completely black background
Container positioned in the center of page - with a white border
Logo, username, password and login button all in center of the container

My code is as follows, I understand it may be very messy and alot of styles may overwrite each other but I am very new to this!

layout = html.Div(
    style={
        "background": 'black',
        "height": "100vh",
        "width": "100vw"},

    children=[
        html.Div(
            children=[
                dcc.Location(id='url_login', refresh=True),
                html.Div(
                    children=[
                        html.Div(layouts.input_logo(app),
                                 style={'display': 'block',
                                        'text-align': 'center',
                                        'margin-left': 'auto',
                                        'margin-right': 'auto'}),
                        html.Br(),
                        dcc.Input(
                            placeholder='Enter your username',
                            type='text',
                            id='uname-box',
                            style={'display': 'table-cell',
                                   'vertical-align': 'middle',
                                   'margin': 'auto'}
                        ),html.Br(),
                        dcc.Input(
                            placeholder='Enter your password',
                            type='password',
                            id='pwd-box',
                            style={'display': 'table-cell',
                                   'vertical-align': 'middle',
                                   'margin': 'auto',
                                   }

                        ),html.Br(),
                        html.Button(
                            children='Login',
                            n_clicks=0,
                            type='submit',
                            id='login-button',
                            style={'display': 'table-cell',
                                   'vertical-align': 'middle',
                                   'margin': 'auto',
                                   }
                        ),
                        html.Div(children='', id='output-state')
                    ]
                ),
            ],
            className='center',
            style={
                'vertical-align': 'middle',
                "height": "40vh"}
        )
    ]
)

The class name “center” is in my assests/styles.css

.center {
  text-align: center;
  padding-top: 30vh;
  margin: auto;
  width: 50%;
  border: 4px solid #FFFFFF;
  vertical-align: middle;
  /*padding: 10px;*/
}

And my logo comes from:

def input_logo(app):
    logo = html.Img(src=app.get_asset_url("logo_white.png"),
                    style={"padding-left": '2vw', "float": "center", "height": 60})
    link = html.A(logo, href="link")
    return dbc.Row([dbc.Col(link, md=4)])

This results in the following;