HTML 居中排布

两种方法，实现下图效果

<style>
			 .box2
                {
                    width: 100%;
                    height: 400px;
                    background-color: #8ddbc8;
                  
                   text-align: center;
                }
                h1{
                    font-size: 20px;
                }

                .ul_1
                {
                    list-style: none;
                    margin: 50px auto;
                    box-sizing: border-box;
                    padding: 0;         /* li可以贴近左边*/
                    width: 100%;
                    display: flex;
                    flex-wrap: wrap; 
                    border: 1px solid black;
                    justify-content: space-between;
                }
                li{
                  
                    width: 45%;
                    border: 1px solid black;
                }
                .disver
                {
                    display: inline-block;
                }

                .box3
                {
                    margin: 0 auto;
                    width: 100%;
                    box-sizing: border-box;
                    height: 200px;
                    border: 1px solid black;
                  
                    text-align: center;
                   
               
                }
                .box4
                {
                    margin-top: 3%;
                    margin-left: 2%;
                    width: 47%;
                    float: left;
                    border: 1px solid black;
                }
 </style>

1、无序列表，灵活布局：自动换行

                <div class="box2">
                     <!-- 无序列表,灵活布局：自动换行 -->
                    <ul class="ul_1">
                        <li>
                            <img class="disver" src="image/kexunhuan.png" style="width: 25%;">
                            <div class="disver">
                                <h1>利率低</h1>
                                灵活定价
                            </div>
                            
                        </li>
                        <li>
                            <img class="disver" src="image/kexunhuan.png"style="width: 25%;">
                            <div class="disver">
                                <h1>利率低</h1>
                                灵活定价
                            </div>
                        </li>
                        <li>
                            <img class="disver" src="image/kexunhuan.png"style="width: 25%;">
                            <div class="disver">
                                <h1>利率低</h1>
                                灵活定价
                            </div>
                        </li>
                        <li>
                            <img class="disver" src="image/kexunhuan.png"style="width: 25%;">
                            <div class="disver">
                                <h1>利率低</h1>
                                灵活定价
                            </div>
                        </li>
                    </ul>

                    
                </div>

2、盒子模型，float浮动

 <!-- 盒子模型，float浮动 -->
                     <div class="box3">
                            <div class="box4">
                                <img class="disver" src="image/kexunhuan.png" style="width: 25%;">
                                <div class="disver">
                                    <h1>利率低</h1>
                                    灵活定价
                                </div>
                            </div>
                            <div class="box4">
                                <img class="disver" src="image/kexunhuan.png" style="width: 25%;">
                                <div class="disver">
                                    <h1>利率低</h1>
                                    灵活定价
                                </div>
                            </div>
                            <div class="box4">
                                <img class="disver" src="image/kexunhuan.png" style="width: 25%;">
                                <div class="disver">
                                    <h1>利率低</h1>
                                    灵活定价
                                </div>
                            </div>
                            <div class="box4">
                                <img class="disver" src="image/kexunhuan.png" style="width: 25%;">
                                <div class="disver">
                                    <h1>利率低</h1>
                                    灵活定价
                                </div>
                            </div>

                    </div>