方法1 ； 父级设行高 子级inline-block 重新设置行高
<style> * { margin: 0; padding: 0; list-style: none; } body { background-color: #94fcff; } .wrap{ height: 300px; background-color: #ffbc9a; line-height: 300px; } .box { background-color: red; display: inline-block; vertical-align: middle; line-height: 30px; } </style> </head> <body> <div class="wrap"> <div class="box"> 我是浮动的盒子 我要居中 我是浮动的盒子 我要居中我是浮动的盒子 我要居中我是浮动的盒子 我要居中 我是浮动的盒子 我要居中我是浮动的盒子
我要居中 我是浮动的盒子 我要居中我是浮动的盒子 我要居中 我是浮动的盒子 我要居中 </div> </div>
方法2 子级与父级高度一致
.wrap{ height: 300px; background-color: #fff; } .box { display: table-cell; vertical-align: middle; height: 300px; }
方法3 flew
.box { display: flex; align-items: center; height: 300px; }
其他定位相关的方法就不写了相信很容易找到