CODEWITHSUNDEEP
htmlcss
Arjit
Arjit

Reputation: 59

Unable to center CSS div center of computer screen

I create a main login div which show middle of screen always. But I have 2 more div. which 'one' is show above the login div and 'second' is below of login div.

My login div is show very good middle of screen but two div which was above and below of login div is not show proper. Why? Anyone help me how I fix that.

MY CODE IS

.myLogindiv {
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -50px;
  margin-left: -100px;
}

.myAbovediv {
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -50px;
  margin-left: -100px;
}

.myBelowdiv {
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -50px;
  margin-left: -100px;
}
<div class="myAbovediv">Above Div Test</div>
<div class="myLogindiv">Login Div Test</div>
<div class="myBelowdiv">Below Div Test</div>

Upvotes: 0

Views: 98

Answers (8)

Wesley Coetzee
Wesley Coetzee

Reputation: 4838

You should use Flexbox

Flexbox will make sure the different areas stay in the correct place, no matter the screen size. You could also look at CSS Grids if you like.

Try this

.container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  /* This is just 200px for the example, you can change this */
  height: 200px;
}

.myLogindiv {
  flex: 1;
}

.myAbovediv {
  flex: 1;
}

.myBelowdiv {
  flex: 1;
}
<div class="container">
  <div class="myAbovediv">Above Div Test</div>
  <div class="myLogindiv">Login Div Test</div>
  <div class="myBelowdiv">Below Div Test</div>
</div>

If you're worried about browser support you can check it out at Can I Use

Upvotes: 0

Alexander Wigmore
Alexander Wigmore

Reputation: 3186

All of the answers so far seem to rely on older techniques for centering, which isn't necessarily bad.

I'm adding my solution below which utilises flex-box layout to centre the div perfectly without having to rely on any random numbers/pixels which can feel odd in your CSS.

html, body {
  min-height: 100%;
}
.wrap {
  position: fixed;
  display: flex;
  flex-wrap: wrap;
  min-height: 100%;
  width: 100%;
  align-content: center;
  justify-content: center;
}
.wrap div {
  width: 100%;
  text-align: center;
}
<div class="wrap">
  <div class="myAbovediv">Above Div Test</div>
  <div class="myLogindiv">Login Div Test</div>
  <div class="myBelowdiv">Below Div Test</div>
</div>

Upvotes: 0

Ashu Mhatugade
Ashu Mhatugade

Reputation: 80

You have written the same CSS for the all of the divs, you haven't identified them uniquely so use ID's instead of classes.

Add one wrapper to these divs and make it centre to body.

Your code should be like:

<style>
   .demo{
      position:absolute;
      left:50%;
      top:50%;
   }

   .demo > div{
     display:block;
   }
</style>

Html code:

    <div class="demo">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    <div>

Upvotes: 0

Vivek Rajoriya
Vivek Rajoriya

Reputation: 11

please check if i sound your question in right sense.

.myLogindiv {
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -50px;
  margin-left: -100px;
}

.myAbovediv {
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -75px;
  margin-left: -100px;
}

.myBelowdiv {
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -25px;
  margin-left: -100px;
}
<div class="myAbovediv">Above Div Test</div>
<div class="myLogindiv">Login Div Test</div>
<div class="myBelowdiv">Below Div Test</div>

Upvotes: 0

לבני מלכה
לבני מלכה

Reputation: 16251

Wrap it in div and use style to wrap div

.wrap {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
<div class="wrap">
   <div class="myAbovediv">Above Div Test</div>
    <div class="myLogindiv">Login Div Test</div>
     <div class="myBelowdiv">Below Div Test</div>
</div>

Upvotes: 1

Becario Senior
Becario Senior

Reputation: 714

Use this bullet proof snippet:

.your-class {
    position: relative;
    top:50%;
    transform: translateY(-50%);
}

Taken from: http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/

Upvotes: 0

KarelG
KarelG

Reputation: 5234

You can wrap those divs in a container and apply CSS styling on that container, combining positioning with CSS transform to align it nicely in the middle.

#loginContainer {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
<div id="loginContainer">
  <div class="myAbovediv">Above Div Test</div>
  <div class="myLogindiv">Login Div Test</div>
  <div class="myBelowdiv">Below Div Test</div>
</div>

Upvotes: 1

Abdi
Abdi

Reputation: 608

You can fix that with 1 div:

Use the below:

.mydiv {
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -50px;
  margin-left: -100px;
}

  
<div class="mydiv">
 <p>Above Div Test</p>
 <p>Login Div Test</p>
<p>Below Div Test</p>
</div>

Upvotes: 0

Related Questions