リスト内の要素を中央寄せにしたい

前提・実現したいこと

ここ最近特にお世話になりっぱなしですみません。
もし宜しければお力を借りられたらと思ってます。

要件と致しましてはリスト（<li></li>）内の要素を中央寄せしたいのですが上手くいかなく困ってます。
理想形は下記の画像の通りになります。

発生している問題・エラーメッセージ

位置調整が上手くいかない

該当のソースコード

html
1<!DOCTYPE html>
2<html>
3<head>
4<meta charset="utf-8">
5<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0">
6<meta http-equiv="X-UA-Compatible" content="IE=edge">
7<title>test</title>
8<link rel="stylesheet" type="text/css" href="css/実験.css" media="all">
9<link rel="stylesheet" type="text/css" href="css/reset.css" media="all" >
10</head>
11<body>
12<header>
13</header>
14
15<div class="contents">
16
17 <div class="decimal_list">
18        <ol>
19        	<li>ダミーテキスト
20            	<div class="downbox clearfix">
21                	<div class="downdetail">
22                        <p class="down">サンプル<br>ダウンロード</p>
23                        <p class="yazirushi">></p>
24                        <a href="#" class="downbtn">PDFファイル</a>
25                        <a href="#" class="downbtn">Excelファイル</a>
26                    </div>
27                </div>
28            </li>
29            <li>ダミーテキスト</li>
30        </ol>
31        </div>
32                
33                </div>
34</body>
35</html>

css
1@charset "utf-8";
2
3/*===================================
4 * css file for "moonyworks.com"
5 * file name : reset.css
6===================================== */
7
8body{font-family:"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"メイリオ",Meiryo,"ＭＳＰゴシック",sans-serif;}
9body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,p,blockquote,th,td{margin:0;padding:0;}  
10fieldset,img{border:0;}
11address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}    
12ol,ul {list-style:none;}
13table{border-collapse:collapse;border-spacing:0;}  
14caption,th {text-align:left;}   
15
16/*
17hrタグを非表示にする記述だが今は使わない
18hr {display:none;} 
19*/
20
21/* ===================
22new clearfix 
23===================*/  
24.clearfix:after {  
25visibility:hidden;/*見えなくする*/ 
26height:0;/*見えなくする*/
27display: block;/*block要素にする*/
28font-size: 0;  
29content: " ";  
30clear: both;  
31
32}  
33* html .clearfix             { zoom: 1; } /* IE6 */  
34*:first-child+html .clearfix { zoom: 1; } /* IE7 */  
35
36
37/* ===================
38スクロールバーの有・無によるページのズレを防ぐ
39===================*/
40* html body {
41     overflow-y: auto;
42}
43
44*+html body {
45     overflow-y: auto;
46}
47
48body {
49     overflow-y: scroll;
50}
51
52

css
1.decimal_list li {
2	display:list-item;
3	list-style-type: decimal;
4	margin-left: 20px;
5	text-align: left;
6}
7
8.downbox{
9	background:#EDF3F8;
10}
11
12.downdetail{
13	display: table;
14  	width: 100%;
15	padding:10px;
16	text-align:center;
17}
18
19.downbox p{
20	color:#86B1CF;
21	display: table-cell;
22  vertical-align: middle;
23	
24}
25
26.down{
27	width:150px;
28}
29
30.yazirushi{
31	width:30px;
32}
33
34.downbtn {
35  display: inline-block;
36  text-decoration: none;
37  background: #86B1CF;
38  color: #FFF;
39  width: 120px;
40  height: 120px;
41  line-height: 120px;
42  border-radius: 50%;
43  text-align: center;
44  overflow: hidden;
45  transition: .4s;
46}

上記の形が一番おしい形なのですが、これでも矢印とボタンの間が空きすぎるという問題が生じてしまいます。

試したこと

・floatを利用した方法。
・ネット検索
https://www.granfairs.com/blog/staff/centering-by-css
上記のサイトなども改めて参考にもしたりもしましたが、どうも上手くいきませんでした。

補足情報（FW/ツールのバージョンなど）

最終手段として全体を画像にするという無理やりな方法考えましたが、レスポンシブ対応にもする点から考えても却下しました。

最近自身の未熟さを痛感してばかりで大変申し訳ないのですが、知恵を貸して頂ければと思います。
宜しくお願い致します。

※追記

現在のキャプチャ

想定対象：ブラウザは現状の一般的な所は一通り全て（IE8、IE7は対象外）
確認済み：クロームとＦｉｒｅｆｏｘは確認済みです。

m.ts10806

2019/11/11 05:53

念のため今の状態がわかるキャプチャと対象としている(または確認した)ブラウザを追記してください

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

回答1件

ベストアンサー

CSS
1.downdetail{
2    display: flex; /*Flex*にする*/
3    width: 100%;
4    padding:10px;
5    justify-content:center; /*横方向中央寄せ*/
6    align-items: center; /*縦方向中央寄せ*/
7}