如何是HTML頁面中的表單居中顯示

在進行前端頁面設置的時候，發現寫完的form表單始終無法居中顯示，詳細如圖1所示：

圖1：問題圖示

代碼如下：

<form class="form-inline" >
        <div class="form-group">
            <label for="exampleInputName2">證書編號:</label>
            <input type="text" class="form-control" id="exampleInputName2" placeholder="請准確輸入證書編號">
        </div>
        <div class="form-group">
            <label for="exampleInputEmail2">獲證組織名稱:</label>
            <input type="email" class="form-control" id="exampleInputEmail2" placeholder="輸入不少於5個字符">
        </div>
        <button type="submit" class="btn btn-default">查詢</button>
    </form>

 

分析原因：form本來就只是一個表單而已，對頁面根本就沒有布局上的作用.，因此無論怎么設置都是無法居中的，但是依舊有辦法解決的；

解決辦法：在外面套一層<div style="width:100%;text-align:center"></div>

代碼如下：

<div style="width:100%;text-align:center">
    <form class="form-inline" >
        <div class="form-group">
            <label for="exampleInputName2">證書編號:</label>
            <input type="text" class="form-control" id="exampleInputName2" placeholder="請准確輸入證書編號">
        </div>
        <div class="form-group">
            <label for="exampleInputEmail2">獲證組織名稱:</label>
            <input type="email" class="form-control" id="exampleInputEmail2" placeholder="輸入不少於5個字符">
        </div>
        <button type="submit" class="btn btn-default">查詢</button>
    </form>
    </div>

 

最終效果如圖2所示：