CSS設置div水平居中的方法

這篇文章給大家分享的是有關CSS設置div水平居中的方法的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

CSS設置div水平居中的方法：1、給div元素設置“margin: 0 auto”樣式；2、在父級div元素里設置“text-align: center”樣式，在子一級div元素里設置“display: inline-block”樣式。

1、外邊距自適應

方式：元素綁定屬性：margin: 0 auto;

  <div class="div-parent">
            <style>
                .div-parent {
                  width: 400px;
                  height: 200px;
                  background-color: #aaa;
                }
                .div-child {
                    width: 100px;
                    height: 50px;
                    background-color: #007FFF;
                    margin: 0 auto;
                }
            </style>   
            <div class="div-child"></div>
        </div>

效果：

注意：常用，適用于已知父級元素寬度的情況

2、行內塊元素

方式：父級元素設置屬性：text-align: center;

子一級元素設置屬性：display: inline-block;

<div class="div-parent">
        <style>
            .div-parent {
              width: 400px;
              height: 200px;
              background-color: #aaa;
              text-align: center;
            }
            .div-child {
                width: 100px;
                height: 50px;
                background-color: #007FFF;
                display: inline-block;
            }
        </style>
            <div class="div-child"></div>
        </div>

效果如圖：

注意：inline-block存在瀏覽器兼容性問題，另行處理因設置inline-block帶來的副作用。

補充：使用定位

方式：父級元素設置屬性：position: relative;

子一級元素設置屬性：position: absolute;

<div class="div-parent">
        <style>
            .div-parent {
              width: 400px;
              height: 200px;
              background-color: #aaa;
              position: relative;
            }
            .div-child {
                width: 80px;
                height: 50px;
                background-color: #007FFF;
                position:absolute;
                left: 40%;
               }
        </style>
            <div class="div-child"></div>
        </div>

效果如圖：

注意：適用于父級元素寬度已知的情況，居中定位自己設置比較麻煩。

感謝各位的閱讀！關于“CSS設置div水平居中的方法”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！