I tried to use "Transform translate" to center a div but it my div is up the page than cen-CodePudding

Basically this is the css code.

.login-box {
  width: 280px;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, 50%)
}

<div >
  <h1>Login</h1>
  <div >
    <input type="text" placeholder="Username" name="" value="">
  </div>
  <div >
    <input type="password" placeholder="Password" name="" value="">
  </div>
  <input  type="button" name="" value="Sign in">
</div>

If you put it in a code editor it does not give me a centered div. Why?

Tried to use transform to center div from a video but did not get results. Link to video:https://www.youtube.com/watch?v=ooc6f1w6Mzg&t=54s

CodePudding user response：

.parent-div{
position: relative,
height: 100vh
}

.login-box{
  position: absolute;
  top:50%;
  left:50%;
  transform :translate(-50%,-50%)
}

<div class='parent-div'>
<div >
      <h1>Login</h1>

      <div >
        <input type="text" placeholder="Username" name="" value="">
      </div>
<div >

<input type="password" placeholder="Password" name="" value="">

</div>

<input  type="button" name="" value="Sign in">

</div>
</div>

CodePudding user response：

The direct answer to your question is: Because top/left positioning does not apply to elements with position: relative, you need to use position: absolute to make those work. Alternatively (without using absolute positioning), you could use flexbox (see second example). Another factor impacting the vertical centering is of course the height of the container. To center it within the page (vertically), the container needs to fill the entire viewport, which it doesn't by default.

This is closest to your code:

body {
  background: lightgray;
  margin: 0;
  min-height: 100vh;
  position: relative;
}
.login-box {
  background: white;
  margin: 0 auto;
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 280px;
}

<div >
      <h1>Login</h1>

      <div >
        <input type="text" placeholder="Username" name="" value="">
      </div>

<div >

<input type="password" placeholder="Password" name="" value="">

</div>

<input  type="button" name="" value="Sign in">

</div>

here is an alternative approach using flexbox (the flexbox container can be any wrapping element, doesn't have to be the body):

body {
  background: lightgray;
  margin: 0;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center
}
.login-box {
  background: white;
  width: 280px;
}

<div >
      <h1>Login</h1>

      <div >
        <input type="text" placeholder="Username" name="" value="">
      </div>

<div >

<input type="password" placeholder="Password" name="" value="">

</div>

<input  type="button" name="" value="Sign in">

</div>

CodePudding user response：

You can easily center a div with display flex.

html {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

.login-box {
  width:280px;
  position: relative;
}

<div >
  <h1>Login</h1>
  <div >
    <input type="text" placeholder="Username" name="" value="">
  </div>
  <div >
    <input type="password" placeholder="Password" name="" value="">
  </div>
  <input  type="button" name="" value="Sign in">
</div>

CodePudding user response：

Position: relative positions the element relative to its parent. The parent has 100% width because it's the body but its height is only the height of the content (which in your case is the login-box div). So when you set top: 50% what you're doing is to set the login-box 50% down its own height. Then transform moves it the rest of the way. In order to centre the div vertically you have to let the browser know how high the body element is and you can do this using min-height: 100vh.

Also using position: relative on the body sometimes not give you the position you want, it's better to use position: absolute. There's a good video and here from Kevin Powell on this.

body {
  outline: 1px solid red;
  }

.login-box {
  width: 280px;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, 50%);
  outline: 1px solid blue;
}

.explainer {
position: absolute;
background-color:yellow;
padding: 0.25rem;
margin: 0.125rem;
}

<div class='explainer'>This red box is your body and you can see it doesn't extend all the way to the bottom of the screen</div>

<div >
  <h1>Login</h1>
  <div >
    <input type="text" placeholder="Username" name="" value="">
  </div>
  <div >
    <input type="password" placeholder="Password" name="" value="">
  </div>
  <input  type="button" name="" value="Sign in">
</div>

To make the thing position in the center just set the body height as follows:

body {
  outline: 1px solid red;
  min-height: 100vh;
  margin: 0;
}

.login-box {
  width: 280px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  outline: 1px solid blue;
}

.explainer {
  position: absolute;
  background-color: yellow;
  padding: 0.25rem;
  margin: 0.125rem;
}

<div >
  <h1>Login</h1>
  <div >
    <input type="text" placeholder="Username" name="" value="">
  </div>
  <div >
    <input type="password" placeholder="Password" name="" value="">
  </div>
  <input  type="button" name="" value="Sign in">
</div>

But with modern css it's far easier to use something like grid:

body {
  display: grid;
  min-height: 100vh;
  place-items: center;
}

.login-box {
  width: 280px;
  outline: 1px solid blue;
}

<div >
  <h1>Login</h1>
  <div >
    <input type="text" placeholder="Username" name="" value="">
  </div>
  <div >
    <input type="password" placeholder="Password" name="" value="">
  </div>
  <input  type="button" name="" value="Sign in">
</div>

CodePudding user response：

Just replace position: relative to position: absolute and give a minus sign before last 50%.

.login-box {
  width: 280px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

CodePudding user response：

Hello replace below css in .login-box class.

width: 190px;
position: absolute;
top: 50%;
left: 0;
right: 0;
margin: 0 auto;
transform: translateY(-50%);