They both accomplish the same thing, which is written better?
Code 1
.play {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
width: 68px;
height: 48px;
}
Code 2
.play {
position: absolute;
left: 50%;
top: 50%;
width: 68px;
height: 48px;
margin-left: -34px;
margin-top: -24px;
}
.play {
position: absolute;
left: calc(50% - 34px);
top: calc(50% - 24px);
width: 68px;
height: 48px;
}
I’ll add that one to the list.
Is using one of these written codes better than the rest?
Code 1
.play {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
width: 68px;
height: 48px;
}
Code 2
.play {
position: absolute;
left: 50%;
top: 50%;
width: 68px;
height: 48px;
margin-left: -34px;
margin-top: -24px;
}
Code 3
.play {
position: absolute;
left: calc(50% - 34px);
top: calc(50% - 24px);
width: 68px;
height: 48px;
}
You’ve already been given the answer!!!
If you changed the width and height of the element which one is going to work without doing anything else to any other rules?
If you can answer that correctly then that’s the one I’d choose?
This one, right.
It stays in the middle no-matter what the width/height is.
.jacket-top .play {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
width: 68px;
height: 48px;
}
What I find odd is this is the one YouTube uses to place their svg in the middle.
Why would they be okay with using a negative margin?
.play {
position: absolute;
left: 50%;
top: 50%;
width: 68px;
height: 48px;
margin-left: -34px;
margin-top: -24px;
}
Because it works.
A lot of developers never realised that margin:auto would automatically centre elements both horizontally and vertically when co-ordinates of top,left,right and bottom were used at the same time. (Historically IE6 did not understand it either which is why many left it out of the toolbox.)
It would center it, but it would also occupy the entirity of that Z-axis layer with your element…Sloppy, imo.
What do you mean, can you explain?
I believe that @m_hutley is thinking that the top,left, right and bottom co-ordinates will create a layer on top of the whole relatively positioned parent and thus cover all of it.
This is not the case and the space around the element will not be affected by the absolutely placed element. In the visual formatting model the over-constrained dimensions of top,left, right and bottom are resolved so that equal (auto) margins can be applied.
The element cannot be over constrained and resolves according to the details mentioned above in the specs. This effectively means that the top,right, left and bottom co-ordinates are resolved by the browser to allow the element to be centred by its width and height and auto margins.
If indeed there were side effects to the method I mentioned then as I said before its not a case of which is better but a case of which is better for the job in hand. There are generally several answers to most CSS questions and debating which is better is not usually productive without the full details of what happens next?
I’m not sure what you are trying to show me but your screenshots confirm that the auto margins are working correctly as shown by the light orange background. The margins don’t interfere or create another stacking level that would obscure any other elements in their way.
I may be getting the wrong end of the stick here but as far as I know there are no usability differences between the methods I mentioned. In devtools you just get shown the margins as you would with any other element.
The absolute element in this demo does not obscure any of the other children apart from the one covered by its width and height.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Untitled Document</title>
<style>
.wrap {
width:50%;
border:1px solid #000;
position:relative;
display:flex;
flex-wrap:wrap;
}
.wrap a {
flex:1 0 20%;
height:50px;
border:1px solid red;
}
a:hover {
background:yellow;
}
.abs {
width:150px;
height:150px;
color:#fff;
background:blue;
position:absolute;
left:0;
top:0;
right:0;
bottom:0;
margin:auto;
z-index:100;
}
</style>
</head>
<body>
<div class="wrap">
<div class="abs">Abs</div>
<a href="#">test</a> <a href="#">test</a><a href="#">test</a><a href="#">test</a><a href="#">test</a><a href="#">test</a><a href="#">test</a><a href="#">test</a><a href="#">test</a><a href="#">test</a><a href="#">test</a><a href="#">test</a><a href="#">test</a><a href="#">test</a><a href="#">test</a><a href="#">test</a><a href="#">test</a><a href="#">test</a><a href="#">test</a> </div>
</body>
</html>
If you do have a demo that shows any differences then I would be pleased to see it because although I know how the specs are supposed to work it is not always the case that browsers implement them correctly.
I quite like being proved wrong as that means we all learn something
The point being that they do do the same thing, one is just more sloppy (the wide margin) than the other.
I disagree and the sloppy method is working out what half the width and height of the element is and then supplying those values in a different rule than the one where you specified width and height. That is a maintenance accident just waiting to happen.
However each to their own and we’ll just have to agree to disagree.
Fair enough, though the browser STILL has to DO the calculation, you’re just obfuscating it and making it less readable by saying “auto”.
Yup, we’ll agree to disagree
They are quite capable of it. They have to work out calculations on their own all the time.
Think about vertical-alignment with inline , inline-blocks, and table-cells ( with both html tables and display:table). It has been around for ages.
baseline | sub | super | text-top | text-bottom | middle | top | bottom | <percentage> | <length>
The browser works out all those alignment positions based off those keywords. Anyone well-versed in CSS would understand what those values mean and that it is the browsers job to DO the calculation.
And now we have flexbox and grid which the browser does a lot of it’s own work with based on the keywords for flex and grid properties.
/* Positional alignment */
justify-content: center; /* Pack items around the center */
justify-content: start; /* Pack items from the start */
justify-content: end; /* Pack items from the end */
justify-content: flex-start; /* Pack flex items from the start */
justify-content: flex-end; /* Pack flex items from the end */
justify-content: left; /* Pack items from the left */
justify-content: right; /* Pack items from the right */
/* Baseline alignment */
/* justify-content does not take baseline values */
/* Normal alignment */
justify-content: normal;
/* Distributed alignment */
justify-content: space-between; /* Distribute items evenly
The first item is flush with the start,
the last is flush with the end */
justify-content: space-around; /* Distribute items evenly
Items have a half-size space
on either end */
justify-content: space-evenly; /* Distribute items evenly
Items have equal space around them */
justify-content: stretch; /* Distribute items evenly
Stretch 'auto'-sized items to fit
the container */
Keywords are a fundamental part of CSS, once your familiar with them (like a browser is) you will know what to expect from the browser. 
To me the keyword auto is very readable. When used in a shorthand property/value like that it is understood that the browser will make the margins the same, thus centering the element. Of course that only applies to block level elements that have a defined width ( could be a percentage width too).
As Paul mentioned earlier, absolute positioned elements have the ability to set auto margins vertically when the top/bottom offset values are set.
Keywords and the browsers job to understand them and work things out on their own have been around a long time.The list of keywords is growing all the time.
I’m still amazed at what we were able to accomplish with CSS 2 and creative minds. Back in those days (legacy layout methods) without the modern layout modules things were much more challenging.
I’m aware of everything you have said. I still disagree
To me, the explicit declaration of the calculation is more readable than the abstraction of auto.
shrug
EDIT: I should clarify that. To me the explicit declaration of the position is more readable than the abstraction of auto margin when it comes to “I want this to be centrally positioned.”
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.