私はWEBサイト制作を始めた頃、中央揃えはtext-align: center;を使っていました。
しかし、それだけだと難しい物やうまく調整できない物が出てくるんですね。
今回は要素の簡単な位置調整の方法をご紹介します。

インライン要素を左右中央揃えにする場合

左右の中央揃えはどれも簡単です。
インライン要素の場合は以下の通りです。

See the Pen
インライン要素の左右中央揃え by Uilou (@uilou754)
on CodePen.0

<div class="outer">
    <p>コンテンツ</p>
</div>

.outer {
    text-align: center;
}

大事なことは、『中央揃えしたい要素』ではなく、『中央揃えしたい要素の親要素』にtext-align: center;を使うことです。
この方法はdisplay: inline;とdisplay: inline-block;で利用できます。

ブロック要素を左右中央揃えにする場合

上記の方法ではインライン要素は中央揃えに出来ますが、ブロック要素を中央揃えにすることができません。
ブロック要素には別の中央揃えの手段が必要で、margin: 0px auto;で調整できます。
親要素や子要素のサイズが決まっている場合でも、真ん中に調整できます。

See the Pen
ブロック要素の中央揃え by Uilou (@uilou754)
on CodePen.0

<div class="outer">
	<div class="inner">コンテンツ</div>
</div>

.inner {
    display: block;
    margin: 0px auto;
    width: 50%;
}

先ほどとは異なり、今度は『中央揃えにしたい要素』にmargin: 0px auto;を使います。

上下中央揃えにする場合（flex-boxを使う方法）

上下中央揃えにする場合、それぞれの要素の高さが決まっていないなら、親要素にpaddingを入れて調整する方法があります。
しかし、親要素のheightが固定値だった場合、中の要素サイズが異なる場合、paddingで調整する方法では高さがバラバラになってしまいます。

上下中央にする場合、私は2通りの方法を使います。
最も手っ取り早いのは、flex-boxを使用する方法です。

See the Pen
インライン要素の上下中央揃え by Uilou (@uilou754)
on CodePen.0

この方法は子要素（中央揃えしたい要素）がインライン要素でもブロック要素でも関係ありません。

<div class="outer">
	<p class="inner inner--inline">インライン要素</p>
</div>
<div class="outer">
	<div class="inner inner--block">ブロック要素</div>
</div>

.outer {
    display: flex;
    align-items: center;
}

中央揃えしたい要素はなんでも良くて、中央揃えしたい要素の親要素にdisplay: flex;を指定します。
そして、align-items: center;を付けるだけで、中の要素が上下中央に寄ります。

上下中央揃えにする場合（positionを使う方法）

そして、もう一つの方法が、positionを使う方法です。

See the Pen
positionによる上下中央揃え by Uilou (@uilou754)
on CodePen.0

まず、親要素にheightを指定し、高さを固定します。
そして、position: relative;を指定します。

子要素にはpotision: absolute;を指定します。
top:50%;を指定することで、子要素の上面が親要素の上下中央位置に移動します。
しかし、これでは中央揃えではありません。

ここからがミソですが、transform: translateY(-50%);でちょうど中央位置に移動します。
これはtopの移動量は親要素を基準に移動するのに対し、translateはその要素自身を基準に移動するからです。

.outer {
    position: relative;
}
.inner {
    position: absolute;
    top: 50%;
    left: 0px;
    transform: translateY(-50%);
}

ただし、インライン要素はうまいこと真ん中に移動しませんので、ご注意ください。

また、.outerの中に複数の要素がある場合、同じ位置で重なってしまうので、複数の要素を一旦divで囲うなどの工夫も必要です。

flex-boxもしくはpositionを使えば、上下左右中央揃えが簡単

flex-boxで上下左右中央揃えする場合

.outer {
    display: flex;
    justify-content: center; // 左右中央寄せ
    align-items: center; // 上下中央寄せ
}

これで内部の要素を上下中央揃えにすることが出来ます。

positionで上下中央揃えする場合

.outer {
    position: relative;
}

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

top: 50%;とtransform: translateY(-50%);で上下中央になったように、left: 50%;とtransform:translateX(-50%);で左右中央にすることが出来ます。

line-heightが1以外の時、positionがabsoluteの要素を1行の中央に寄せたい場合

って言われても意味わかんないと思うんですが、わかりやすく言えば、リストの点です。
例えば、以下の例です。

最後の行が2行になっていますが、単純にこの点を先ほどのtopとtransformで揃えると、2行の真ん中に来てしまいます。

これでは点の位置おかしいですよね？
そこで、ブロック要素の上下中央ではなく、1行の上下中央に寄せる技をご紹介します。

ul > li {
    position: relative;
    line-height: 180%;
}
ul > li::before {
    display: block;
    width: 5px;
    height: 5px;
    position: absolute;
    top: calc(1.8em / 2);
    left: 20px;

    content: '';  // 点をちょっと大きく表示したいので、・は使わない
    background: black;
    border-radius: 50%;
    transform: translateY(-50%);
}

これで、1行目の中で上下中央の高さに点が表示されます。

ここでのミソはline-height: 180%;に対して、top: calc(1.8em / 2);をしている所です。
line-heightとtopのemは一致させてください。
line-heightが200%なら、topの所は2emです。

仕組みは1.8emがline-heightの高さを含んだ1行分の高さを表しています。
それをcalc(1.8em / 2)で1行分の半分の高さにしています。

ここからは先ほどと同じで、点の基準位置が要素の上部になっているので、点の半分の高さ分、上にtransformすることで、完全に中央になるように位置を調整しています。

ちなみに、top: calc(1.8em * 2);にすると、2行分になります。