Problem with center div

[young moss]

Hello, I am having problem when centering div horizontal and vertical.

This is how it looks when I do not resize (first screenshot) https://prnt.sc/TssG9JP6zMzt

And this is when I resize (second screenshot) https://prnt.sc/WAEaStDKi2i6

I am using this technique for center vertical and horizontal:

position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);

Div box (with black border) is overlap with h1. And space between h1 and div is too big even when I turn of all margins and padding. Any thoughts?

P.S. I know I can solve with flex but I wanted to know and learn using this technique.

[brazen fjord]

Have you looked at this resource?
https://css-tricks.com/centering-css-complete-guide/#aa-both-horizontally-vertically

[leaden canopy]

@young moss Do you by chance have a link to your scrim? I’m curious if the position should be relative to its parent instead 🙂

[young moss]

Yes, I did, but not helping 🙂

[young moss]

Here is my code on codepen: https://codepen.io/bledajo/pen/qBMYyzj
When I set parent element to relative, it is even worse. I get this
https://prnt.sc/dSLSLmSI9joB
Half div and h1 are missing then...

[leaden canopy]

@young moss I went through and set margin to : 0 auto(top and bottom = 0 , left and right = auto align. ) then set position of the container to relative, and removed the translate property. this was the result i got. Is this what you were trying to do? if not let me know and ill try another approach 🙂

body{
margin: 0;
font-size: 16px;

}

header{
margin-top: 45px;
}

h1{
font-size: 48px;
color: #2e7ad3;
text-align: center;
margin-top: 0;
margin-bottom: 0;
padding: 45px 0;
}

h2{
margin-top: 0;
margin-bottom: 10px;
font-size: 32px;
color: #104c90;
}

p{
margin-bottom: 9px;
margin-top: 0;
}

.container{
margin: 0 auto;
position: relative;
/* transform: translate(-50%, -50%); */
border: 2px solid black;
width: 450px;
background-color: #f1f1f1;
padding: 25px;
}

a{
color: #ff8000;
font-weight: bold;
}

a:hover,
a:focus{
color: #104c90;
}

.blog-img{
width: 100%;
margin-bottom: 25px;
}

[young moss]

Yes, that is result I wanted. But I have few question. How do you get that result with just position: relative and removing transform, top and left property? Can you explain please? And one other thing. When I measure with ruler and with software the distance between top border and top of page and bottom border and bottom of page, it is not same. Like it is not center vertically exact as is should be. Bottom space is little bigger then upper space. But, this is not just for your solution. I try with flexbox, same result like yours but in both case it is not equally vertically align. Space top and bottom are not equal. Any thoughts?

[leaden canopy]

awesome! so with the position relative, i am telling the container to position itself according to the position of the header. So because the header is using an h1 that should be block scope(takes up the whole left to right section of the page) theoretically with position relative it should force my container to the next line.(the boxes can be seen in the screenshot below). So by forcing it onto a new line (excluding the margin auto) it would position the element to the far left (similar to flexbox's justify-content: start.. this is shown in the first screenshot). Then since we know that a left and right margin of auto sets the content in the center of the page, we added in "margin: 0 auto which adds no margin to the top and bottom and auto's the left and right resulting in the second screenshot. I would assume the reason for the differences in size for the top and bottom would be due to web browsers by default adding in margin and padding(even if you didnt code it in) as a result.. unless we add a css reset, the browser will add in whatever margin and padding they have by default, ontop of our values that we define in our code.

so commonly, you can add a reset with the * selector and define what is needed in that styling bracket: * {
margin: 0;
padding: 0;
}

ah sorry, i realize i left out your question about transform: translate. with that, you were correct in use as it allows us to move an element along the x and y axis. However, i would use it in situations where you purposely are trying to overlap an item over another. But for centering, id stick with margin: 0 auto 🙂

lastly, for a better reference to what i mean with transform: translate, here is a codepen 🙂 https://codepen.io/olawanlejoel/pen/YzxqwPg

[young moss]

First I want to thank you for time and knowledge that you devote to help me. I am really grateful!

Now, I did read all of your last answers and here is what is bugging me. Sorry in advance if I do not understood some basic concept...

You said (#1085666286312366190 message) that with position relative, we are telling container to position itself according to the position of the header. Isn't by definition relative positioning a type of positioning that allows you to position an element relative to its normal position (and not to parent element) on the web page. When an element is relatively positioned, it is moved from its original position, but the space it previously occupied is still reserved for it, so other elements are not affected. Right?

Next, you said that with relative positioning of container we force container to the next line. Isn't container by default going to new line because is block element?

And third, I do understand how it is center horizontally with margin: 0 auto, but I still do not understand how that property and property position: relative (code that you wrote) did vertical align of box container to be on center of page.

[leaden canopy]

I apologize as my previous answer is incorrect. Your exactly right. The position relative positions the element relative to its normal position by default and you are also correct in indicating that the container is forced to the new line due to it by default being a block level element. My apologies for this mistake. As for the vertical alignment I think the actual reasoning is simply just the document flow. When two such elements have no explicit positioning, they will be positioned one after the other in the normal flow, with the second element appearing below the first one

[young moss]

No problem 🙂 Yes, normal flow is one below other, but how box container knows to align itself to vertical center of the page? It is not the case that H1 is centered vertically and then we can say that container know to align right below him. (h1 is just center horizontal to center).

Please sorry, I just checked again your code solution. It turns out that it does not do vertical align of container. Just horizontal. I look wrong first time. So we are at square one again 🙂

[leaden canopy]

No problem at all! Sorry for so much confusion on my end! So it’s not working again? 😦

[young moss]

No problem. You are so kind. No. With flexbox it works. But with transform: translate technique it does center but it overlap with heading 1. Maybe it can't be done because of absolute position. Maybe it needs to be sticky somehow, when browser is resized to, for example 40px of top margin, to stick there. But don't know exact how to do that because it already have position: absolute. It can't have both sticky and absolute. 🙂 Or maybe some other technique...

[leaden canopy]

I’ll mess with it more when I get home and see if I can figure it out 😎

[uncut blaze]

@leaden canopy The first solution if you want to center something display: block; margin: 0 auto because the element take the whole width horizontally another one with display:flex; justify-content: center and with grid; place-items: center