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

Example sandbox file

.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;
}