Always use the flex variant. You should use the other variants only for extreme old browser support.

Center Horizontally

Using flex.

.f-horizontal-parent {
    display: flex;
    justify-content: center;
    background: red;
}
.f-horizontal-child {
    max-width: 50%;
    background: yellow;
}

<div class="f-horizontal-parent">
    <div class="f-horizontal-child">Center</div>
</div>

Using text-align.

.a-horizontal-parent {
    text-align: center;
    background: red;
}
.a-horizontal-child {
    display: inline-block;
    background: yellow;
}

<div class="a-horizontal-parent">
    <div class="a-horizontal-child">Center</div>
</div>

Using margin.

.m-horizontal-parent {
    width: 100%;
    background: red;
}
.m-horizontal-child {
    max-width: 50%;
    margin: 0 auto;
    background: yellow;
}

<div class="m-horizontal-parent">
    <div class="m-horizontal-child">Center</div>
</div>

Center Vertically

Using flex.

.f-vertical-parent {
    display: flex;
    align-items: center;
    height: 150px;
    background: red;
}
.f-vertical-child {
    max-width: 50%;
    background: yellow;
}

<div class="f-vertical-parent">
    <div class="f-vertical-child">Center</div>
</div>

Using display: table.

.t-vertical-parent {
    display: table;
    width: 100%;
    height: 150px;
    background: red;
}
.t-vertical-child {
    display: table-cell;
    vertical-align: middle;
    background: yellow;
}

<div class="t-vertical-parent">
    <div class="t-vertical-child">Center</div>
</div>

Center Horizontally and Vertically

Using flex.

.f-center-parent {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 150px;
    background: red;
}
.f-center-child {
    max-width: 50%;
    background: yellow;
}

<div class="f-center-parent">
    <div class="f-center-child">Center</div>
</div>

Using display: table. Child border fills the parent.

.t-center-parent {
    display: table;
    width: 100%;
    height: 150px;
    background: red;
}
.t-center-child {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    background: yellow;
}

<div class="t-center-parent">
    <div class="t-center-child">Center</div>
</div>

Using position: relative.

.p-center-parent {
    position: relative;
    width: 100%;
    height: 150px;
    background: red;
}
.p-center-child {
    position: absolute;
    top: 50%;
    height: 100px;
    margin-top: -50px;
    left: 50%;
    width: 100px;
    margin-left: -50px;
    background: yellow;
}

<div class="p-center-parent">
    <div class="p-center-child">Center</div>
</div>

Using transform: translate. Doesn't work in IE8 or Opera Mini.

.tt-center-parent {
    position: relative;
    width: 100%;
    height: 100px;
    background: red;
}
.tt-center-child {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 50%;
    height: 50%;
    background: yellow;
}

Corner Elements

Using flex.

.f-corner-parent {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 150px;
    background: red;
}
.f-corner-child {
    flex: 1;
    max-width: 50%;
    background: yellow;
}
.f-corner-child-top {
    align-self: flex-start;
}
.f-corner-child-bottom {
    align-self: flex-end;
}

<div class="f-corner-parent">
    <div class="f-corner-child f-corner-child-top">Top</div>
    <div class="f-corner-child">Center</div>
    <div class="f-corner-child f-corner-child-bottom">Bottom</div>
</div>

Sources

• The Anti-hero of CSS Layout - "display:table"
• Solved by Flexbox