Div實現水平垂直居中

時間 2019-12-02

標籤 div 實現水平垂直居中欄目 CSS 简体版

原文原文鏈接

　　在實際應用中不少地方不只要求實現元素的水平居中或者垂直居中效果，還可能會在水平方向和垂直方向上都要實現居中效果，下面就簡單介紹幾種元素水平垂直居中的方法（注：不一樣的方法會存在一些優缺點以及兼容性問題）css

hmtl結構：html

<body>
    <div class="parent">
        <div class="child"></div>
    </div>
</body>

定位 + 負外邊距

 .parent{
            position: relative;
            width: 200px;
            height: 200px;
            background-color: blue;
        }
        .child{
            position: absolute;
            top: 50%;
            left: 50%;
            width: 50px;
            height: 50px;
            margin-left: -25px;
            margin-top: -25px;
            background-color: #fff;
        }

　　原理：元素設置定位並給定 50% 的top值和left值，再經過負margin 將元素向左上移動自身寬高的一半（margin-top:-height/2; margin-left:-width/2），該方法前提是要知道元素的寬高瀏覽器

定位 + 平移

.parent{
            position: relative;
            width: 200px;
            height: 200px;
            background-color: green;
        }
        .child{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            width: 50px;
            height: 50px;
            background-color: #fff;
        }

　　原理：和上面方法相似，不一樣的是使用CSS3新增屬性 transform 中的 translate 平移屬性代替 margin屬性，這樣就是根據自身尺寸進行移動，缺點是因爲爲新增屬性，兼容性天然就不是很好，遠古IE不支持。wordpress

強大的 「margin:auto」

  .parent {
            position: relative;
            width: 200px;
            height: 200px;
            background-color: deeppink;
        }

        .child {
            position: absolute;
            top: 0;
            bottom:0;
            left: 0;
            right: 0; 
            width: 50px;
            height: 50px;
            margin: auto;
            background-color: #fff;
        }

　　原理：該方法的關鍵點是：1.絕對定位的（top、right、bottom、left）四個屬性均要設置值爲0；2.margin:auto，可以適用單個元素或者父子級元素，設置絕對定位並添加 margin:auto 屬性就可以實現水平垂直居中，元素可自定義寬高，也可不設置（須要是自身存在尺寸的元素：img等），具體絕對定位+margin:auto 的實現原理參考https://www.zhangxinxu.com/wordpress/2013/11/margin-auto-absolute-%E7%BB%9D%E5%AF%B9%E5%AE%9A%E4%BD%8D-%E6%B0%B4%E5%B9%B3%E5%9E%82%E7%9B%B4%E5%B1%85%E4%B8%AD/
佈局

flex佈局

 div.parent{
            display: flex;
            justify-content: center;
            align-items: center;
            width: 200px;
            height: 200px;
            background-color: red;
        }
        div.child{
            width: 50px;
            height: 50px;
            background-color: lime;
        }
//或者

div.parent{
            display: flex;
            width: 200px;
            height: 200px;
            background-color: red;
        }
        div.child{
            width: 50px;
            height: 50px;
　　　　　　　margin:auto;
            background-color: lime;

　　　原理：經過給父元素設置display爲flex，再設置 item 的主軸和輔軸的對齊方式，兼容性也不是很好（IE8+ 及大衆瀏覽器），大多數用於移動端佈局flex

grid佈局

.parent{
            display: grid;
            width: 200px;
            height: 200px;
            background-color:deepskyblue;
        }
        .child{
            justify-self: center;
            align-self: center;
            width: 50px;
            height: 50px;
            background-color: #fff;
        }

　　原理：和flex佈局實現思路相似。spa

表格佈局

  .parent {
            display: table-cell;
            height: 200px;
            width: 200px;
            background-color: orange;
            text-align: center;
            vertical-align: middle;
        }

        .child {
            display: inline-block;
            width: 100px;
            height: 100px;
            background-color: blue;
        }

　　以上內容參考自其它文章並結合自身理解，若存在錯誤請指出，謝謝！！！orm

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。