タブメニューの中のlabel要素を中央寄せにしたい

前提・実現したいこと

タブメニューのlabel要素だけをサイズ調整可能にし、中央寄せにしたい。

試したこと

・label要素「.tab-label」に「display: block;float: left;text-align: center;」
（サイズ調整は効くようになったが中央寄せにならず）

・「.tab-wrap」に中央寄せの設定（label要素だけでなくタブエリア全体のサイズが変わってしまった）

・「.tab-label」の外側だけを新しいdivで囲み、中央寄せ設定
（間にlabel要素以外のものが入っていてうまくいかない）

・「.tab-label」だけを抜き出してまとめて、新しいdivで囲む（タブ内のテキストが消えてしまった）

どなたか解決方法を教えていただけないでしょうか。

該当のソースコード

html
1<div class="tab-wrap">
2<input id="tab01" type="radio" name="tab" class="tab-switch" checked="checked"><label class="tab-label" for="tab01">タブ ①</label>
3<div class="tab-content">
4コンテンツ 1
5</div>
6<input id="tab02" type="radio" name="tab" class="tab-switch"><label class="tab-label" for="tab02">タブ ②</label>
7<div class="tab-content">
8コンテンツ 2
9</div>

css
1.tab-wrap {
2  display: flex;
3  flex-wrap: wrap;
4  margin:20px 0;
5}
6.tab-wrap:after {
7  content: '';
8  width: 100%;
9  height: 3px;
10  background: #325A8C;
11  display: block;
12  order: -1;
13}
14.tab-label {
15  position: relative;
16  display: block;
17  float: left;
18  width: calc(100%/4 - 10px * 2);
19  margin: 0 10px;
20  padding: 10px 0;
21  color: #a3a3a3;
22  background: #fff;
23  font-weight: bold;
24  white-space: nowrap;
25  text-align: center;
26  order: -1;
27  z-index: 1;
28  cursor: pointer;
29  border-radius: 5px 5px 0 0;
30}
31.tab-label:not(:last-of-type) {
32  margin-right: 5px;
33}
34.tab-content {
35  width: 100%;
36  height: 0;
37  overflow: hidden;
38  opacity: 0;
39}
40.tab-switch:checked+.tab-label {
41  background: #fa7699;
42  color: #fff;
43}
44.tab-switch:checked+.tab-label+.tab-content {
45  height: auto;
46  overflow: auto;
47  padding: 15px;
48  opacity: 1;
49  transition: .5s opacity;
50  box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
51}
52.tab-switch {
53  display: none;
54}
55</div>