Skip to main content

Alignment & positioning

Alignment in CSS is a dilemma for beginners, there are tons of ways to achieve it but helpers classes are life savers.

Flex

Flexbox is a great feature in CSS you can have what you need without any effort though, with vendor prefixes it can be messy if you repeat the main logic all the time, it is better to use the helper classes. There are two types of helper classes for vertical and horizontal centering with Flexbox.

Pay attention

For alignment with flexbox, the helper class should be applied to the wrapper element so the child itself without flex parent do nothing.

.inline-flex Treats as inline flex.

Children in a row

.flex-center [row] Alignment for both X and Y axes.
.flex-center-x [row] Alignment for X axis.
.flex-center-y [row] Alignment for Y axis.

index.html
<div class="flex-center style-light">
  <div class="style-red"></div>
  <div class="style-green"></div>
  <div class="style-blue"></div>
</div>

<div class="flex-center-x style-light">
  <div class="style-red"></div>
  <div class="style-green"></div>
  <div class="style-blue"></div>
</div>

<div class="flex-center-y style-light">
  <div class="style-red"></div>
  <div class="style-green"></div>
  <div class="style-blue"></div>
</div>

Children in a column

.flex-column-center [column] Alignment for both X and Y axes.
.flex-column-center-x [column] Alignment for X axis.
.flex-column-center-y [column] Alignment for Y axis.

index.html
<div class="flex-column-center style-light">
  <div class="style-red"></div>
  <div class="style-green"></div>
  <div class="style-blue"></div>
</div>

<div class="flex-column-center-x style-light">
  <div class="style-red"></div>
  <div class="style-green"></div>
  <div class="style-blue"></div>
</div>

<div class="flex-column-center-y style-light">
  <div class="style-red"></div>
  <div class="style-green"></div>
  <div class="style-blue"></div>
</div>

Margin

.margin-auto


.margin-ya Margin top & bottom is auto.
.margin-ta Margin top auto.
.margin-ba Margin bottom auto.


.margin-xa or .push-center Margin left & right is auto.
.margin-la or .push-right Margin lefy is auto.
.margin-ra or .push-left Margin right is auto.

With margin you can center an element one horizontal line.

index.html
<div class="style-light">
  <div class="push-left style-red"></div>
</div>

<div class="style-light">
  <div class="push-center style-green"></div>
</div>

<div class="style-light">
  <div class="push-right style-blue"></div>
</div>

Absolute position

Sometime it happens that the element has absolute position and you might try above tricks but they will not work, to center things with absolute position just set both sides so in this case left: 50% or something like is not a wise choice, top and bottom or left and right to 0 and set margin: auto. The list position helper classes are:

.position-relative To have relative postion (mostly for wrapper).
.position-absolute To have absolute postion (mostly for children).


.place-expand It sets all sides to 0
.place-expand-y It sets top and bottom to 0
.place-expand-x It sets left and right to 0


.place-top It sets top to 0
.place-bottom It sets bottom to 0
.place-left It sets left to 0
.place-right It sets right to 0

Let see what is the better way:

index.html
<div class="style-light position-relative">
  <div class="position-absolute place-top place-left style-blue"></div>
  <div class="position-absolute place-top place-expand-x margin-xa style-blue"></div>
  <div class="position-absolute place-top place-right style-blue"></div>

  <div class="position-absolute place-expand-y place-left margin-ya style-red"></div>
  <div class="position-absolute place-expand margin-auto style-red"></div>
  <div class="position-absolute place-expand-y place-right margin-ya style-red"></div>

  <div class="position-absolute place-bottom place-left style-green"></div>
  <div class="position-absolute place-bottom place-expand-x margin-xa style-green"></div>
  <div class="position-absolute place-bottom place-right style-green"></div>
</div>

Sticky & Fixed

Sticky and fixed positions have their helper classes. The main use case for these classes is related to nav bar component.

.sticky-top
.sticky-bottom
.sticky-left
.sticky-right

.fixed-top
.fixed-bottom
.fixed-left
.fixed-right