025 奥展项目涉及的前端知识笔记

1.让一个子div组件在父div组件中居中

效果图：

 

html代码：

                <div  class="searchuser">
                            <!--<span>根据用户名查询用户信息：</span>-->
                            <!--col-lg-3该样式控制input框的宽度-->
                            <div class="col-lg-3 searchcenter" >
                                <div class="input-group ">

                                    <input type="text" class="form-control" placeholder="请输入待查询的用户名">
                                    <span class="input-group-btn">
                                        <button class="btn btn-primary" type="button">查询</button>
                                    </span>
                                </div><!-- /input-group -->
                            </div>
                        </div>

css样式控制：

.searchuser{
    /*设置div的宽度为50px*/
    height: 50px;
    width: 100%;
    margin: 0 auto;
    /*设置div的内边距是20px*/


}

.searchcenter{

    margin-top: 15px;
    margin-left: 40%;
}