????????本文主要記錄幾種常用的div盒子水平垂直都居中的方法。本文主要參考了該篇博文并實踐加以記錄說明以加深理解記憶?css之div盒子居中常用方法大全
? ? ? ? 本文例子使用的 html body結構下的div 盒子模型如下：
<body><div class="container"><div class="box"></div></div>
</body>? ? ? ? ?例子盒子居中效果都如下圖：
注：當把div 盒子模型中子div換成其他塊級元素，如<p>或<h1>~<h6>時，以下方法仍然奏效。但當把子div換成行內元素，如<span>時，第6,第7種方法將失效。
1、彈性布局 設置容器項目在橫軸和縱軸上都居中對齊
<style>.container{height: 300px;width: 300px;border: 1px solid black;background-color: aliceblue;display: flex;justify-content: center;align-items: center;}.box{width: 120px;height: 120px;background: #55a9ff;}
</style>?
2、彈性布局 設置容器項目 margin:auto
? ? ? ? 該方法可以不設置容器項目橫軸和縱軸的對齊方式，直接設置margin:auto即可2、彈性布局 設置容器項目 margin:auto
<style>.container{height: 300px;width: 300px;border: 1px solid black;background-color: aliceblue;display: flex;}.box{width: 120px;height: 120px;margin: auto;background: #55a9ff;}
</style>??
3、絕對定位法
? ? ? ? 父div要使用其中一種定位方式：relative /?absolute?/?sticky /?fixed，子div使用絕對定位，并使它的 top、left、right、bottom 都為0且margin:auto 即可
<style>.container{height: 300px;width: 300px;border: 1px solid black;background-color: aliceblue;position: relative;}.box{width: 120px;height: 120px;position: absolute;background: #55a9ff;top: 0;left: 0;right: 0;bottom: 0;margin: auto;}
</style>- 絕對定位法還可以只設置top、bottom為0，實現只垂直居中
<style>.container{height: 300px;width: 300px;border: 1px solid black;background-color: aliceblue;position: relative;}.box{width: 100px;height: 100px;position: absolute;background: #55a9ff;top: 0;bottom: 0;margin: auto;}
</style>
- ?同理可以只設置left、right為0，實現只水平居中?
4、transform居中法
? ? ? ? 使用 transform 可以不用管子div自身的寬高，但要設置父子div的position屬性，可都設置成?relative /?absolute，此方法IE9 以下不支持
<style>.container{height: 300px;width: 300px;border: 1px solid black;background-color: aliceblue;position: relative;}.box{width: 120px;height: 120px;position: absolute;background: #55a9ff;top: 50%;left: 50%;transform: translate(-50%,-50%);}
</style>5、負margin居中
? ? ? ? 利用子div 負的margin來進行居中，此方法要知道子div固定的寬高，且margin-top、margin-left 要是子div 自身寬高負的一半值
<style>.container{height: 300px;width: 300px;border: 1px solid black;background-color: aliceblue;position: relative;}.box{width: 120px;height: 120px;position: absolute;background: #55a9ff;top: 50%;left: 50%;margin-top: -60px;margin-left: -60px;} /* 如果box的寬高都是100px,那margin-top和margin-left要是-50px */
</style>6、margin固定寬高居中
? ? ? ? 此方法要知道父子div的寬高，且要算出子div的margin 的高度和寬度 恰好在父div居中
該方法把子div換成行內元素，如<span>時將會失效
<style>.container{height: 300px;width: 300px;border: 1px solid black;background-color: aliceblue;}.box{width: 120px;height: 120px;background: #55a9ff;margin: 90px 90px;}/* 如果 box 的寬高都是 100px,那么 margin: 100px 100px; */
</style>7、table-cell居中
? ? ? ? 此方法是將父div轉換成表格單元格顯示，然后使用垂直居中并且子div左右margin auto實現，該方法把子div換成行內元素，如<span>時將會失效
<style>.container{height: 300px;width: 300px;border: 1px solid black;background-color: aliceblue;display: table-cell;vertical-align: middle;}.box{width: 120px;height: 120px;background: #55a9ff;margin: 0 auto; /* 不能省 */}
</style>8、不確定寬高居中(絕對定位百分數)
? ? ? ? 此方法不設置子div的寬高，其寬高根據設置占用父div的比例來算，left和right的百分數一樣就可以實現水平居中，top和bottom的百分數一樣就可以實現垂直居中。其中子div要設置成絕對定位，父div 要設置成?relative / absolute /?fixed /?sticky
<style>.container{height: 300px;width: 300px;border: 1px solid black;background-color: aliceblue;position: relative;}.box{position: absolute;background: #55a9ff;top: 25%;left: 25%;right: 25%;bottom: 25%;margin: auto;}/* top / left / right / bottom 設置的比例不一樣，box 的寬高將會隨之變大或變小*/
</style>
以上方法如有錯誤請各位不吝指教，如以后有別的方法將會往下繼續添加，各位有其他方法可留言告知。
_案例：使用正則表達式的爬蟲)
可正常發送(保姆教程,復制粘貼可用))
