CODEWITHSUNDEEP
htmlcssmargin
Jan Doomwalkerx Peřina
Jan Doomwalkerx Peřina

Reputation: 305

Css margin-top moves parent element

I have a code like this:

<html>
<head>
....
</head>
<body>
   <div class="custom">
      ...custom stuff here...
   </div>
</body>

Next I have a css like this :

.custom{
margin-left: 45%;
margin-top: 45%;
}

This code is supposed to move the div always to center of the screen. The margin left works perfectly fine, and centers the div properly, but the margin-top moves the body element - which is the parent element of the div. If I change the units to other than % (px,em,rem) it works fine ... but with % it moves the body. I tried stuff like adding little padding/margin to parent, adding overflow and other properties inside the parent but it is still doing the same thing. The body element is moved by 45% to almost double size of my screen, so in the end the is almost out of the screen at the bottom.

If the margin should not accept % units why is the margin-left working fine ? I don't understand this behaviour. Also elements inside div should absolutely not do anything with the parent so I am really confused right now.. Any ideas ?

Forgot to add some body definitions :

body{
   width: 700px;
   height: 400px;
   margin : 5px 5px 5px 5px;
   overflow: hidden;
   backgrou....
}

Upvotes: 1

Views: 3148

Answers (5)

T&#250;lio Castro
T&#250;lio Castro

Reputation: 1323

Explanation

Yes, it is a correct behaviour because the percents consider parents position. Like in your example, it will be positioned 45% below of body position.

But in your example, this wont work because 45% is not the center of any screen, see your example with some borders to see the behaviour:

body {
  border:1px solid red;
}

.custom{

  margin-left: 45%;
  margin-top: 45%;
  
  border:1px solid blue;
  
}
<div class="custom">
      ...custom stuff here...
   </div>

There are different way to do this, you can use display:flex, or just positioning using Maths, Eg:

Solution - Absolute elements

If you can float your element, define your element with position:absolute, so define top and left 50% and return with transform -50%, see this example.

This is nice to centerize, it works in any element with any size.

.custom{

  position: absolute;
  
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  
  border:1px solid blue;
  
}
<div class="custom">
      ...custom stuff here...
   </div>

Upvotes: 3

Empirical Edge Inc.
Empirical Edge Inc.

Reputation: 1

.custom {
    border: solid 1px red;
    margin: 0 auto;
    display:table;
}

<html>

<head>
  ....
</head>

<body>
  <div class="custom">
    ...custom stuff here...
  </div>
</body>

Upvotes: 0

Adam Buchanan Smith
Adam Buchanan Smith

Reputation: 9439

You are using margins, incorrectly.

Make .content absolute then place where ever you want.

see fiddle: https://jsfiddle.net/4p18mxg9/6/

.custom{
position: absolute;    
left: 45%;
top: 45%;
}

Upvotes: 2

AGE
AGE

Reputation: 3792

I get why you do not understand this behavior, it is a common question and a dilemma that keeps on showing up for everyone.

Before we dive into it, please reference this great article.

So, because you are trying to center your custom div using margins alone, you are essentially not centering with respect to the page. Think about what margin does for you: it clears an area around an element. You could easily have a case where your margin is equal to the greater of the adjoining margins; this is common when working with vertical margins.

You can get around this issue in different ways, namely your approach is incorrect.

I suggest looking up the article I linked and using their solution for centering things horizontally:

margin: 0 auto;

Here you may add a vertical margin if you wish like so:

margin: 20vh auto 0 auto;

Let me know if you need any more assistance

Upvotes: 2

J.J.
J.J.

Reputation: 355

If you assign a width, it will be on the center of the screen with

.custom {
    border: solid 1px red;
    margin: auto;
    width: 20em;
}

I also recommend this web Learn CSS Layout, it's all I always wanted to know.

Upvotes: 0

Related Questions