css中已知寬高的子元素水平垂直居中的三種方法
阿新 • • 發佈：2019-02-08
元素水平垂直居中三種的方法
設定兩個盒子，關係是父與子：
<body> <div id="wrap"> <div id="inner"> inner </div> </div> </body>方法一：
- 將父元素的width和height設定的和子元素的大小一樣，然後設定父元素wrap的padding。此時padding會將子元素擠進父元素的中間位置；
- 此時父、子元素的定位是否開啟都可以；
*{ margin: 0; padding: 0; } #wrap{ width: 100px; height: 100px; /*將padding設定，來擠出來居中的樣子；但是要注意的是，此時的width和height要和子元素的大小一樣，否則還是不居中*/ padding: 100px; border: 1px solid; margin: 100px auto; } #inner{ width: 100px; height: 100px; background: pink; line-height: 100px; text-align: center; }
方法二：
- 父元素相對定位，子元素絕對定位；
- 絕對定位盒子模型有個特點：left+right+width+padding+margin=包含塊的寬度；所以此時可以將left、right（預設值為auto，所以需要重設定）設定為0，而padding已經確定（未設定時預設值為0px），所以剩下的都是margin，但是margin的預設值是0px。所以就將magin設為auto，使得元素自動居中了；
- 即：left、right、top、bottom為0；margin為auto;
*{margin: 0;padding: 0;} #wrap{ position: relative; width: 200px; height: 200px; /*padding: 100px;*/ border: 1px solid; margin: 100px auto; } #inner{ position: absolute; /*left+right+width+padding+margin=包含塊的寬度*/ /*0 0 100 0 auto =300*/ left: 0; right: 0; top: 0; bottom: 0; margin: auto; width: 100px; height: 100px; background: pink; line-height: 100px; text-align: center; }
方法三：
- 父元素相對定位，子元素絕對定位；
- 將子元素left和right直接設為50%，相對的是父元素；
- 然後在使用margin-left和margin-top設為子元素的一半的負數。就是將偏離父元素中心的那段拽回來；
#inner{ position: absolute; left: 50%; top: 50%; margin-left: -50px; margin-top: -50px; width: 100px; height: 100px; background: pink; line-height: 100px; text-align: center; }
（待擴充）