CSSで上下や左右から中央揃えする8つの方法！

1. .sample{
2.   text-align: center;
3. }

テーブルセルでの使用した場合はこのようなイメージです。

CSSの例はこんな感じです。

1. .sample-outer{
2.   display: table;
3.   width: 100%;
4. }
5. .sample-inner{
6.   display: table-cell;
7.   vertical-align: middle;
8. }

インライン要素を上下左右中央揃えする

CSSの例はこんな感じです。

1. .sample-outer{
2.   display: table;
3.   width: 100%;
4. }
5. .sample-inner{
6.   display: table-cell;
7.   text-align: center;
8.   vertical-align: middle;
9. }

アウトライン要素を上下左右中央揃えする

下記は実際に実装したイメージとなります。

1. .sample-outer{
2.   position: relative;
3. }
4. .sample-inner{
5.   position: absolute;
6.   top: 0;
7.   right: 0;
8.   bottom: 0;
9.   left: 0;
10.   margin: auto;
11.   width: 90%;
12.   height: 100px;
13. }

1. .sample-outer{
2.   position: relative;
3. }
4. .sample-inner{
5.   position: absolute;
6.   top: 50%;
7.   left: 50%;
8.   transform: translateY(-50%) translateX(-50%);
9.   -webkit- transform: translateY(-50%) translateX(-50%);
10. }

1. .sample-outer{
2.   display: flex;
3.   justify-content: center;
4.   align-items: center;
5. }

簡単な説明になりましたが、少しでも参考になればと思います。
実装するwebやAppに合わせて、いろんなものを使い分けてみてください。