reference: https://css-tricks.com/centering-css-complete-guide/
1. Is it inline or inline-* elements (like text or links)?
You can center inline elements horizontally, within a block-level parent element, with just:
.center-children{
text-align:center;
}
This will work for inline, inline-block, inline-table, inline-flex, etc.
2. Is it a block level element?
You can center a block-level element by giving it margin-left and margin-right of auto (and it has a set width, otherwise it would be full width and wouldn't need centering). That's often done with shorthand like this:
.center-me{
margin:0 auto;
}
This will work no matter what the width of the block level element you're centering, or the parent.
Note that you can't float an element to the center. There is a trick though.
3. Is there more than one block level element?
If you have two or more block-level elements that need to be centered horizontally in a row, chances are you'd be better served making them a different display type. Here's an example of making them inline-block and an example of flexbox:
