本文由 发布，转载请注明出处，如有问题请联系我们！ 发布时间: 2021-08-01div上下布局方法-利用div和css布局的优势

內容手册

当父div的行高高过其本身相对高度时，这家银行中的內部原素将上下居中表明。当行块沒有固定不动相对高度时，他们也表态下表明在核心。因而，必须调节父div的行高。应用精准定位特性方式(上，左，右，下)百分数。如果是100%，则表明偏移的长短是父div相对高度(总宽)的100%。精准定位特性左右(或上下)各自设定为0，但子div有固定不动的相对高度(总宽)，不可以做到左右(上下)0的间距。这时，为子div设定margin:auto将使其表明在核心。

转载喜爱JS的密名站。

比如，父div(w:100%；H:400px)有一个子系统分区(w:100 px；100px)。前后左右垂直居中。

方式一（varticle-align）

念头

运用报表表格中的垂直居中特性。

流程

父div表层配备一个div，与此同时设定为报表原素 (display: table)，总宽为100%父div配备为报表表格中原素 (display: table-cell)父div配备垂直居中特性（vertical-align: middle），使子div上下居中子div根据margin配备上下垂直居中（margin-left:auto; margin-right:auto）

事例

* {margin: 0; padding: 0; box-sizing: border-box;} .table {display: table; width: 100%;} .father {display: table-cell; vertical-align: middle;} .son {margin: auto;}

留意:

报表表格中较为独特，假如只有一个表格中时，它的总宽默认设置会占父级（table|tr）总宽的100%;table默认设置总宽不容易展开，必须手工配备width:100%；

方式二(line-height)

念头

当父div的行高高过其本身相对高度时，这家银行中的內部原素将上下居中表明。当行块沒有固定不动相对高度时，他们也表态下表明在核心。应用文字垂直居中特性text-align:center，能够在上下核心表明內部内联元素或内联块原素。

流程

子div设置为业内块原素(display:inline-block)；父div设定行高(line-height)使子div上下居中父div设定文字垂直居中(text-align:center)使子div上下垂直居中。 * {margin: 0; padding: 0; box-sizing: border-box;} .father {line-height: 500px; text-align: center; font-size: 0;} .son { display: inline-block; /* display: inline-flex; display: inline-grid; display: inline-table; */ }

留意:假如行高设定为当今父div的相对高度(400px)，则核心不容易表明固定不动相对高度的子div。难题取决于电脑浏览器默认设置将其视作文字核心，将要其视作一段文字(chrome默认设置字体大小:16px相对高度:21px)，而且它并不是以100px的相对高度为核心。因而，必须调节父div的行高。以font-size:0(相匹配字体样式相对高度为0)为例子，必须提升一个子div的相对高度(400px 100px；)。

方式三（精准定位）

念头

应用精准定位特性方式(上，左，右，下)百分数。如果是100%，则表明偏移的长短是父div相对高度(总宽)的100%。

流程

父div标识下精准定位（position:relative|absolute|fixed）;子div绝对定位（position:absolute）子div上下居中：top:50%;margin-top:-h/2; 或者 bottom:50%;margin-bottom:-h/2;；子div上下垂直居中: left:50%;margin-left:-w/2 或者 right:50%;margin-right:-w/2；

事例

* {margin: 0; padding: 0; box-sizing: border-box;} .father {position: relative;} .son {position: absolute;bottom:50%;margin-bottom: -50px;left: 50%;margin-left: -50px; }

方式四（精准定位）

念头:

精准定位特性左右(或上下)各自设定为0，但子div有固定不动的相对高度(总宽)，不可以做到左右(上下)0的间距。这时，为子div设定margin:auto将使其表明在核心。

流程:

父div标识下精准定位（position:relative|absolute|fixed|sticky）;子div绝对定位（position:absolute）子div上下居中：top:0;bottom:0;margin-top:auto;margin-bottom:auto子div上下垂直居中：left:0;right:0;margin-left:auto;margin-right:auto

事例

* {margin: 0; padding: 0; box-sizing: border-box;} .father {position: relative;} .son {position: absolute; top: 0; bottom:0; left: 0; right: 0; margin: auto}

方式五（flex）

念头

弹性盒，带定心脏功能。

事例

* {margin: 0; padding: 0; box-sizing: border-box;} .father {display: flex; align-items: center} .son {margin: auto}