Constraints - CENTER
This document is based on horizontally centered element. (which applies the same to vertically centered.)
Before we start, we recommand you to read Figma Constraint docs. in this document, we only handle CENTER
The behaviour
It's similar how Android's ConstraintLayout
works. Yet, web (css) or flutter does not have such layout.
Web - css
.container {
/* ... */
position: relative; /* for stacking items */
/* ... */
}
/* const diff = C1 - c1; this will be a pre calculated static value */
.centered {
position: absolute;
left: calc(50% + diff - 100px);
right: calc(50% + diff + 100px);
width: 200px;
}