How to center these divs correctly? [duplicate] - html

Question

This question already has answers here:
Flexbox: center horizontally and vertically
(14 answers)
How can I horizontally center an element?
(133 answers)
How can I vertically center a div element for all browsers using CSS?
(48 answers)
Closed 2 years ago.
I have tried to center my divs like described on this website but something is wrong and I don't get it. Maybe you know what the problem is, because I can't find a proper solution to center the divs in the exact middle. I have added just one css input description because the others are the same.
.registerBox {
position: relative;
height: 80%;
justify-content: center;
align-items: center;
}
.center {
position: relative;
height: auto;
justify-content: center;
align-items: center;
}
.centergui {
justify-content: center;
align-items: center;
}
//text styles
.h1 {
margin: auto;
justify-self: center;
text-align: center;
}
input[id="usernametext"] {
z-index: 2;
border-radius: $textinputradius;
background-color: $textinputbackground;
font-size: $textinputfontsize;
#include respond-to(medium-devices) {width: 125px;}
#include respond-to(wide-screens) {float: none;}
}
input[id="usernametext"],input[type="password"],input[id="emailtext"],input[id="phonenumbertext"], textarea, select {
outline: #272727;
border: none;
color: #ececec;
}
<div className={"h1"}> <h1>Register</h1> </div>
<div className={"flexCenter"}>
<div className={"registerBox"}>
<div className={"center"}><input type={"text"} id={"usernametext"} placeholder={"Username"}/></div>
<div className={"center"}><input type={"text"} id={"emailtext"} placeholder={"Email-Address"}/></div>
<div className={"center"}><input type={"password"} id={"passwordtext"} placeholder={"Password"}/></div>
<div className={"center"}><input type={"text"} id={"phonenumbertext"} placeholder={"Phonenumber(optional)"}/></div>
</div>

Answer 1

I want to offer two options - flex and table. Wrap in two parent divs (an additional parent div is needed so that the top label is left-aligned and centered at the same time), and add flex rules to the topmost parent div. Did you need it?
flex:
.center_flex {
display: flex;
justify-content: center;
}
.registerBox {
position: relative;
height: 80%;
justify-content: center;
align-items: center;
}
.center {
position: relative;
height: auto;
justify-content: center;
align-items: center;
}
.centergui {
justify-content: center;
align-items: center;
}
//text styles
.h1 {
margin: auto;
justify-self: center;
text-align: center;
}
input[id="usernametext"] {
z-index: 2;
border-radius: $textinputradius;
background-color: $textinputbackground;
font-size: $textinputfontsize;
#include respond-to(medium-devices) {width: 125px;}
#include respond-to(wide-screens) {float: none;}
}
input[id="usernametext"],input[type="password"],input[id="emailtext"],input[id="phonenumbertext"], textarea, select {
outline: #272727;
border: none;
color: #ececec;
}
<div class="center_flex">
<div class="center_flex_container">
<div className={"h1"}> <h1>Register</h1> </div>
<div className={"flexCenter"}>
<div className={"registerBox"}>
<div className={"center"}><input type={"text"} id={"usernametext"} placeholder={"Username"}/></div>
<div className={"center"}><input type={"text"} id={"emailtext"} placeholder={"Email-Address"}/></div>
<div className={"center"}><input type={"password"} id={"passwordtext"} placeholder={"Password"}/></div>
<div className={"center"}><input type={"text"} id={"phonenumbertext"} placeholder={"Phonenumber(optional)"}/></div>
</div>
</div>
</div>
For a table, it is enough to wrap it in only one parental div, setting the margin rules:
.center_table {
display: table;
margin-left: auto;
margin-right: auto;
}
.registerBox {
position: relative;
height: 80%;
justify-content: center;
align-items: center;
}
.center {
position: relative;
height: auto;
justify-content: center;
align-items: center;
}
.centergui {
justify-content: center;
align-items: center;
}
//text styles
.h1 {
margin: auto;
justify-self: center;
text-align: center;
}
input[id="usernametext"] {
z-index: 2;
border-radius: $textinputradius;
background-color: $textinputbackground;
font-size: $textinputfontsize;
#include respond-to(medium-devices) {width: 125px;}
#include respond-to(wide-screens) {float: none;}
}
input[id="usernametext"],input[type="password"],input[id="emailtext"],input[id="phonenumbertext"], textarea, select {
outline: #272727;
border: none;
color: #ececec;
}
<div class="center_table">
<div className={"h1"}> <h1>Register</h1> </div>
<div className={"flexCenter"}>
<div className={"registerBox"}>
<div className={"center"}><input type={"text"} id={"usernametext"} placeholder={"Username"}/></div>
<div className={"center"}><input type={"text"} id={"emailtext"} placeholder={"Email-Address"}/></div>
<div className={"center"}><input type={"password"} id={"passwordtext"} placeholder={"Password"}/></div>
<div className={"center"}><input type={"text"} id={"phonenumbertext"} placeholder={"Phonenumber(optional)"}/></div>
</div>
</div>