Why is a -50% translate offset needed for the top 50%?
Instead of directly answering this question, I will address the broader topic of:
How does CSS position anchoring function?
By explaining the concept generally, you will grasp the aspects relevant to your specific scenario.
What exactly is meant by "position anchoring"?
Position anchoring refers to when a DOM node is placed in such a way that it is linked or "anchored" to its parent in a specified dimension. When the top left corner of the node is anchored to the top left corner of its parent, both elements will remain aligned at their respective top left corners, regardless of size changes.
How does position anchoring manifest?
I will employ a template for all subsequent examples to emphasize the core code more effectively.
.container {
background-image: -webkit-linear-gradient(left, darkred 0, darkred 50%, goldenrod 50%, goldenrod 100%), -webkit-linear-gradient(left, darkgreen 0, darkgreen 50%, darkblue 50%, darkblue 100%);
background-image: linear-gradient(to right, darkred 0, darkred 50%, goldenrod 50%, goldenrod 100%), linear-gradient(to right, darkgreen 0, darkgreen 50%, darkblue 50%, darkblue 100%);
background-position: top, bottom;
background-repeat: no-repeat;
background-size: 100% 50.1%, 100% 50.1%;
height: 70vh;
margin: 15vh 15vw;
position: relative;
width: 70vw;
}
.box {
background-image: -webkit-linear-gradient(left, red 0, red 50%, yellow 50%, yellow 100%), -webkit-linear-gradient(left, green 0, green 50%, blue 50%, blue 100%);
background-image: linear-gradient(to right, red 0, red 50%, yellow 50%, yellow 100%), linear-gradient(to right, green 0, green 50%, blue 50%, blue 100%);
background-position: top, bottom;
background-repeat: no-repeat;
background-size: 100% 50.1%, 100% 50.1%;
height: 50vmin;
position: absolute;
width: 50vmin;
}
<div class="container">
<div class="box"></div>
</div>
This example illustrates a parent container with quadrants colored dark red, dark yellow, dark green, and dark blue to demonstrate alignment. Nested within is a child box with quadrants colored red, yellow, green, and blue to illustrate alignment contrast.
All forthcoming examples will utilize this boilerplate structure to highlight the pertinent code segments further.
Note that the default placement anchors the child's top left corner to the parent's top left corner.
Adjusting Parent Anchoring
Parent anchoring can be modified by using the child element's properties like top, bottom, left, and right.
Top Alignment
Setting the top property aligns the child's top edge with the parent's top edge.
If bottom is not configured, top: 0 will look similar to the default top: auto.
.container{background-image:-webkit-linear-gradient(left,darkred 0,darkred 50%,goldenrod 50%,goldenrod 100%),-webkit-linear-gradient(left,darkgreen 0,darkgreen 50%,darkblue 50%,darkblue 100%);background-image:linear-gradient(to right,darkred 0,darkred 50%,goldenrod 50%,goldenrod 100%),linear-gradient(to right,darkgreen 0,darkgreen 50%,darkblue 50%,darkblue 100%);background-position:top,bottom;background-repeat:no-repeat;background-size:100% 50.1%,100% 50.1%;height:70vh;margin:15vh 15vw;position:relative;width:70vw;}.box{background-image:-webkit-linear-gradient(left,red 0,red 50%,yellow 50%,yellow ...
(box {
top: 0;
}
<div class="container">
<div class="box"></div>
</div>
Utilizing a percentage value positions the child's top edge at the specified percentage from the parent's top.
top: 50% places the child in the middle of the parent:
.container {...
.box {...
top: 50%;
}
}
<div class="container">
<div class="box"></div>
</div>
top: 100% indicates the child will be positioned at the bottom of the parent:
.container {...
.box {...
top: 100%;
}
}
<div class="container">
<div class="box"></div>
</div>
Bottom Alignment
Anchoring to the bottom aligns the child's bottom edge with the parent's bottom edge:
bottom: 50% sets the child at the center of the parent, aligned opposite to top: 50%:
.container {...
.box {
bottom: 50%;
}
}
<div class="container">
<div class="box"></div>
</div>
Similarly, bottom: 100% locates the child at the top of the parent:
right: 50% indicates the center portion of the parent, with an opposite positioning from left: 50%:
.container {...
.box {...
right: 50%;
}
}
<div class="container">
<div class="box"></div>
</div>
right: 100% situates the child on the left side of the parent:
Child Anchoring
Child alignment can be independently altered from parent alignment by leveraging the transform property. Specifically, the translate, translateX, and translateY functions are employed to adjust the child box alignment.
This mechanism operates due to percentages in the translate value being relative to the child, while percentages in the top, bottom, left, and right properties are relative to the parent.
Vertical Alignment
The child's vertical alignment can be adjusted through transform: translateY().
transform: translateY(0) keeps the child in place without any adjustments.
When the child is top-anchored to the parent, transform: translateY(-50%) centers the child vertically:
.container {...
.box {
top: 0;
transform: translateY(-50%);
}...
}
<div class="container">
<div class="box"></div>
</div>
Conversely, when the child is bottom-anchored to the parent, transform: traslate(50%) centers the child vertically:
.box {
bottom: 0;
transform: translateY(50%);
}
top: 100% is akin to bottom: 0; transform: translateY(100%)
:
Horizontal Alignment
The child's horizontal alignment can be refined via transform: translateX().
transform: translateX(0) maintains the child's original position.
For a child anchored to the left side of the parent, transform: translateX(-50%) centers the child horizontally:
...</div>
.box {
transform: translateX(-50%);
}...
transform: translateY(50%) centers the child horizontally:
.box {
right: 0;
transform: translateX(50%);
}
left: 100% equals right: 0; transform: translateX(100%)
.
Centered Anchoring
To center the child precisely, align it to the parent's middle and then modify the child's origin accordingly.
.container {...
.box{
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
bottom: 50%;
right: 50%;
transform: translate(50%, 50%);
Similar questions
If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search
"Pressing the 'back' button on your browser takes
Is there a way to navigate back to the main page by clicking on an image?
After selecting First, Picture1 will be shown. How can I go back to the selection page for further choices?
<a href="picture1.jpg"> <h3>First</h3></a>
<a ...
Unresolved styles in React component linked to styles.css file
As I dive into creating a registration page in ReactJS, I encounter a frustrating issue with my styles not applying correctly from the styles.css file.
Let's take a look at my RegisterPage.jsx component:
export default function RegisterPage() {
ret ...
Generating a dynamic table using Angular
My goal is to populate a table dynamically using the code below:
teams.component.ts
import { Component, OnInit } from '@angular/core';
import { first } from 'rxjs/operators';
import { TeamService } from 'src/app/services/team.ser ...
Toggle the visibility of a div based on the user's session status
Having an admin link with the div id "admin" and starting sessions when a user is logged in helps distinguish between normal users and admins. While normal users are restricted access to files designated for admin only, they can still view the admin link. ...
Displaying URLs stylishly with Pills Bootstrap
When a pill is selected from the list, I need to display a specific URL that can be used elsewhere. However, there is an href="#pills-something" attribute that directs to an ID below.
I am looking for something like:
mysite.com/myspecificpill or ...