Cómo alinear las cosas en CSS

Imprescindible el artículo How To Align Things In CSS:

There are a few ways to align elements in CSS. In this article, Rachel Andrew explains what they are with some tips to help you remember which to use and why.

Los consejos que da son:

To wrap up, I have a quick summary of the basics of alignment. If you remember these few rules, you should be able to align most things with CSS:

1. Are you aligning text or an inline element? If so, you need to use text-align, vertical-align, and line-height.
2. Do you have an item or items you want to align in the center of the page or container? If so, make the container a flex container then set align-items: center and justify-content: center.
3. For Grid Layouts, the properties that start with align- work in the Block direction; those which start with justify- work in the inline direction.
4. For Flex Layouts, the properties that start with align- work on the Cross Axis; those which start with justify- work on the main axis.
5. The justify-content and align-content properties distribute extra space. If you have no extra space in your flex or grid container, they will do nothing.
6. If you think you need justify-self in Flexbox, then using an auto margin will probably give you the pattern you are after.
7. You can use Grid and Flexbox along with the alignment properties for tiny layout jobs as well as main components — experiment!