CSS: vertical alignment - centering

1. Absolute positioning and margin auto
  - An element with no intrinsic size: equal values from the top and bottom.
  - An element has intrinsic dimensions: 0 for top and bottom, then apply margin auto.

  - The limitation: the element height must be explicitly declared, or it will occupy the entire container.

.container{
  position:relative;
}
.element{
  position:absolute;
  top: 0; bottom: 0; left: 0; right: 0;
  margin: auto;
  height: 20px; /*requires explicit height*/
}

 

2.Top 50% translate -50%
- relying on absolute positioning the inner element at 50% from the top of their parent,
- then translating it up 50% of its height.
- only major limitation: translate that might get in the way of other transforms, e.g. when applying transitions/animations.

.container{
  position: relative;
}
.element{
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}

 

3. Tables 

- using semantic HTML, switching the display of the element to table-cell. 

- works even when both elements are of unknown height.
- The limitations

  : non-centered sibling might get tricky with the background limits.
  : cell will make screen readers interpret it as an actual table. Far from the best when it comes to accessibility.

.container{
  display: table;
}
.element{
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  background: tomato;
  height: 200px; width:200px;
  color: white; font-size: 2rem;;
}

 

4. The pseudo element

- inline-block with a ghost (pseudo) element that has 100% height of the parent,
- then setting the vertical-align property to middle.
- the limitation: the horizontal center a tiny bit to the right, because of whitespace between inline-block elements.
   : being the margin-left -1ch
   : setting the font size to 0 on the container then resetting it to px or rem on the element.

.container::before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-left: -1ch;
}
.element{
  display: inline-block;
  vertical-align: middle;
}

 

[modern CSS...]

5. Margin auto on a flex-item

- only major limitation is that it’ll only work with a single element.

.container{
  display:flex;
}
.element{
  margin:auto;
}

 

6. Pseudo-elements on a flex-container

- Not the most practical approach, but we can also use flexible, empty pseudo elements to push the element to the center.
- This may be useful when we want to keep a flexible spacing on a column-oriented flex-container with multiple items.

.container{
  display: flex;
  flex-direction: column;
}
.container::before,
.container::after {
  content: "";
  flex: 1;
}

*flex: <positive-number> : Makes the flex item flexible and sets the flex basis to zero, resulting in an item that receives the specified proportion of the free space in the flex container. If all items in the flex container use this pattern, their sizes will be proportional to the specified flex factor. flex:1; = flex:1 1 0n; (where n is a length unit).

(from: https://www.w3.org/TR/css-flexbox-1/#flex-common)

 

7. Align on the flex-container or the flex-item

- Depending on the flex-direction, we might use justify-content or align-items to adjust as needed.

- to support older browsers: IE 11 should work, but buggy, IE 10 requires additional work. different syntax, and requires the -ms vendor prefix.

On the container:

.container{
  display: flex;
  justify-content: center;
  align-items: center;
}

On a particular flex-item:

.container{
  display: flex;
}
.element{
  align-self: center;
  margin: 0 auto;
}

 

8. Align on the grid-container or the grid-item

-CSS Grid includes pretty much the same alignment options as flexbox, so we can use it on the grid-container
-Lack of legacy browser support.

.container{
  display: grid;
  align-items: center;
  justify-content: center;
}

on a specific grid-item:

.container{
  display: grid;
}
.element{
  justify-self: center;
  align-self: center
}

 

9. Pseudo-elements on a grid

- Similarly to the flexbox alternative, we could use a three-row grid with pseudo-elements.
- 1fr actually means minmax(auto, 1fr) : the empty rows will not necessarily take one-third of the container height. They will collapse as needed all the way down to their minimal value of auto, and without content, means 0.
  (read: https://github.com/w3c/csswg-drafts/issues/1777)

.container{
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(3, 1fr);
}
.container::before,
.container::after{
  content:"";
}

 

10. Explicit grid row placement

 - CSS grid allows items to be explicitly placed on a specific row, so the same grid declaration as above and the item placed on the second row will be enough.
- This one can work down to IE10.

.container{
  display: -ms-grid;
  -ms-grid-rows: (1fr)[3];
  -ms-grid-columns: 1fr;
}
.element{
  -ms-grid-column: 1;
  -ms-grid-row: 2;
}

 

11. Margin auto on a grid-item

- Similarly to flexbox, applying margin-auto on a grid-item centers it on both axes.

.container{
  display: grid;
}
.element{
  margin: auto;
}

---

from: https://blog.logrocket.com/13-ways-to-vertical-center/