1. 怎么让一个不定宽高的 div 水平垂直居中
1.1 使用Flex
方法：只需要在父盒子设置： display: flex; justify-content: center; align-content: center; 即可，由于父盒子没有宽高，所以会通栏显示，子盒子同样没有宽高，它的大小由其内容撑开。
演示代码如下：
<style> .father { display: flex; justify-content: center; align-content: center; background: #00f; } .son { background: red; } </style> </head> <body> <div class="father"> <div class="son">我是子盒子</div> </div> </body>
展示效果：
1.2 使用CSS3 的transform 和 定位
方法： 给父盒子设置： display: relative;
给子盒子设置： transform: translate(-50%, -50%); position: absolute; top: 50%; left: 50%; 由于父盒子没有高度，所以不显示父盒子的颜色，子盒子是相对 于浏览器页面居中的
代码如下：
<style> .father { display: relative; background: #f00; } .son { transform: translate(-50%, -50%); position: absolute; top: 50%; left: 50%; background: #0f0; } </style> </head> <body> <div class="father"> <div class="son">我是子盒子</div> </div> </body>
效果展示：
1.3 使用 display: table
方法： 为父盒子设置： display: table; 暂时给父盒子一个宽高 width: 223px; height: 166px;
为子盒子设置： display: table-cell; vertical-align: middle; text-align: center;
代码如下：
<style> .father { width: 223px; height: 166px; display: table; background: #ff0f; } .son { display: table-cell; vertical-align: middle; text-align: center; background: #0f0; } </style> </head> <body> <div class="father"> <div class="son">我是子hdfh dhds hdfh sf hfghtsys 盒子</div> </div> </body>
效果展示：
