CSSで要素を中央に配置したい

CSSで要素を中央に配置したいです。

HTML
1<div class="contents_button clearfix">
2                <div class="surcle">
3                    <div class="inner_button clearfix">
4                        <img src="../../image/service_surcle.png" alt="Service"/>
5                        <p>Service</p>
6                    </div>
7                    <div class="inner_button_titile">サービス
8                       <span class="inner_button_text">内容</span>
9                    </div>
10               </div>
11               <div class="surcle">
12                    <div class="inner_button clearfix">
13                        <img src="../../image/Information_surcle.png" alt="Information"/>
14                        <p class="Information_style">Infor<br><span>mation</span></p>
15                    </div>
16                          <div class="inner_button_titile">企業情報
17                          <span class="inner_button_text">内容</span>
18                    </div>
19                </div>
20                <div class="surcle">
21                    <div class="inner_button clearfix">
22                        <img src="../../image/History_surcle.png" alt="History"/>
23                        <p>History</p>
24                    </div>
25                        <div class="inner_button_titile">沿革
26                            <span class="inner_button_text">内容</span>
27                       </div>
28               </div>
29               
30             <div class="contents_button_second">
31                <div class="surcle">
32                    <div class="inner_button clear_box">
33                        <img src="../../image/emplovment_surcle.png" alt="Employment"/>
34                        <p class="Employment_style">Employ<br><span>ment</span></p>
35                    </div>
36                        <div class="inner_button_titile">採用情報
37                          <span class="inner_button_text">内容</span>
38                        </div>
39                </div>
40                <div class="surcle">
41                    <div class="inner_button clearfix">
42                        <img src="../../image/Contact_surcle.png" alt="Contact"/>
43                        <p>Contact</p>
44                    </div>
45                          <div class="inner_button_titile">お問い合わせ
46                          <span class="inner_button_text">内容</span>
47                    </div>
48                </div>
49             </div>
50            </div>
51
52<!-- 以下コンテンツ内容が続く -->
53</div>

CSS
1.inner_contents{
2    height: 100%;
3    margin: auto;
4    max-width: 95%;
5}
6
7.contents_button{
8   width:100%;
9    
10    margin: auto;
11    position: relative;
12}
13
14.clearfix:after{
15    content: "";
16    clear: both;
17    display: block;
18}
19
20@media(max-width: 1200px){
21    .contents_button{
22        display: flex;
23        flex-direction: column;
24        align-items: center;
25    }
26    .surcle{
27        display: flex;
28        justify-content: space-around;
29        width: min-content;
30    }
31}
32
33.inner_button{
34    width: 15%;
35    max-width: 230px;
36    min-width: 130px;
37    height: auto;
38    margin-top: 50px;
39    position: relative;
40    float:left;
41}
42
43.inner_button img{
44    width: 100%;
45}
46
47.inner_button p{
48    position: absolute;
49    color: white; 
50    letter-spacing: 6px;
51    font-size: 13px;
52    top: 50%;
53    left: 50%;
54    -ms-transform: translate(-50%,-50%);
55    -webkit-transform: translate(-50%,-50%);
56    transform: translate(-50%,-50%);
57    margin: 0;
58    padding: 0;
59}
60
61@media(min-width: 640px){
62    /* 文字 */
63    .inner_button p{
64        font-size: calc(13px + ((1vw - 6.4px)*1.785))
65    }
66}
67
68@media(max-width: 1200px){
69    /* 文字 */
70    .inner_button p{
71        font-size: 23px;
72    }
73}
74
75.inner_button_titile{
76    color: #797979;
77    width: 15%;
78    height: 15%;
79    max-width: 400px;
80    min-width: 150px;
81    float:left;
82    font-size: 10px;
83    margin: 70px 10px 10px 1%;
84}
85
86.inner_button_text{
87    float: left;
88    font-size: 7px;
89    margin-left: 10px;
90}
91
92@media(min-width: 640px){
93    /* 文字 */
94    .inner_button_titile{
95        font-size: calc(10px + ((1vw - 6.4px)*1.25))
96    }
97
98    .inner_button_text{
99        font-size: calc(7px + ((1vw - 6.4px)*0.714))
100    }
101}
102
103@media(max-width: 1200px){
104    /* 文字 */
105    .inner_button_titile{
106        font-size: 17px;
107    }
108
109    .inner_button_text{
110        font-size: 12px;
111    }
112}
113
114/* Information文字指定 */
115.Information_style span{
116    margin-left: 15%;
117}
118
119@media(min-width: 640px){
120
121    .Information_style{
122        font-size: calc(13px + ((1vw - 6.4px)*1.785))
123    }
124}
125
126@media(max-width: 1200px){
127
128    .Information_style{
129        font-size: 23px;
130    }
131}
132
133/* 各コンテンツボタン 2段目 */
134.contents_button_second{
135  position: relative;
136}
137
138.clear_box{
139    clear: both;
140}
141
142.Employment_style span{
143    margin-left: 30%;
144}
145
146@media(max-width: 1200px){
147    .contents_button_second{
148        display: flex;
149        flex-direction: column;
150        align-items: center;
151    }
152}

contents_buttonの中身を中央寄せにしたいです。

contents_buttonにdisplay: flex;とalign-item:centerをいれたり、margin: 0 auto；を入れたりしましたが変わりませんでした。
margin: 0 auto；で若干動いてはいるのですが、中央ではありません。

どうすれば中央寄せにできるのでしょうか？
どなたかご教授頂けますと幸いです。

※display: flex;やdisplay: inline-block;にすると中央寄せにならない上、デザインが崩れます。
※position: fixed;やposition: absolute;にすると中央寄せにならない上、全体のデザインが崩れます。

追記
画像のようにしたいです。
現状一番小さい丸と四角が左寄せになっています。

azuapricot

2019/12/03 06:02

CSSの質問なのに現状のCSSコードをなぜ提示しないのか・・・ floatで横並びになっていますとか書かれても再現できません。修正してコードを提示して下さい。

x_x

2019/12/03 06:26

あってますか？「item1と2と3、item4と5」とありますがコード上にはなく、どれを指しているのか不明です。「innerはmargin: auto;」とありますが、それと思しき「.inner_contents」は HTML 上にありません。

退会済みユーザー

2019/12/03 06:58

すみません。修正前のコードの内容のままにしてしまっていました。内容再度修正いたしました。

x_x

2019/12/03 07:20

できていると思うのですが、中央寄せになっていないと思われるところを図示してもらえないでしょうか？

退会済みユーザー

2019/12/03 08:59

何度もすみません。追記で画像をつけてみました。これで大丈夫でしょうか？

x_x

2019/12/03 09:06

flex にしていない 1200px 超の場合のことでしょうか？

退会済みユーザー

2019/12/04 00:15

説明が足りず申し訳ありません。 1200px 超の場合です。

行動規範の内容に同意します

回答1件

ベストアンサー

css
1.contents_button{
2    display: flex;
3    flex-wrap: wrap;
4    justify-content: center;
5}
6.contents_button_second {
7    width: 100%;
8    display: flex;
9    justify-content:center;
10}
11
12.surcle {
13    display: flex;
14}

『.inner_button』と『.inner_button_titile』のfloat:leftを削除でどうでしょう？

投稿2019/12/03 07:48

編集2019/12/03 07:49

achamaru

総合スコア71

退会済みユーザー

2019/12/03 08:49

ご回答ありがとうございます。やってみたのですが左に寄ってしまいました・・・

achamaru

2019/12/03 09:15

言葉足らずでした＞＜元のCSSに上のやつ追加でも左に寄りますか？

退会済みユーザー

2019/12/04 00:11

返信が遅くなってしまい申し訳ありません。ご指摘いただいた部分を追加すると参考画像の一番小さな丸と四角の配置が２・１・２となるように変化して中心より左に寄ってしまいました・・・

achamaru

2019/12/04 03:13 編集

あ～、、、そうですね。せっかく試してみてもらったのに、すみません＞＜ .contents_button{ display: flex; flex-wrap: wrap; justify-content: center; } .contents_button_second { width: 100%; display: flex; justify-content:center; } .surcle { display: flex; justify-content: center; flex: 1; } これを追加でどうでしょう？

退会済みユーザー

2019/12/04 04:13

出来ました！ずっと悩んでいたので本当に助かりました！お時間を使って頂きありがとうございました！

achamaru

2019/12/04 04:16 編集

おおっ！良かったです～ ^ ^！

achamaru

2019/12/04 04:50

あ、ひとつ思ったのですが、.surcleにflex:1が入ってると、下の2つ（採用情報、お問い合わせ）も等分になるので下の2つが上の３つよりも幅広くなるかもしれません。必ず3列入るなら、.surcle のflex:1を削除して代わりにflex-basis: 33%;を入れてやると良いかもしれないです。ただ、列が増える可能性がある場合はflex-basisも都度変更しないといけないです。

退会済みユーザー

2019/12/05 02:08

返信が遅くなってしまいすみません。補足までして頂きありがとうございます！参考にさせて頂きます。！

行動規範の内容に同意します