How to center these divs correctly?

Question

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>

Also, please use standard HTML, not the template here. Your snippet won't run correctly otherwise. — Robo Robok, Oct 16 '20 at 12:14
Have you an element father wich is declared as flex? example display:flex; ? — Sfili_81, Oct 16 '20 at 12:15
you are missing some css in your question (what's the css for flexCenter?). Can you create a jsfiddle/codepenio link to show your problem? your question is incomplete — arieljuod, Oct 16 '20 at 12:16

score 0 · Accepted Answer · answered Oct 16 '20 at 12:34

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>

How to center these divs correctly?

1 Answers1