css盒子垂直居中
首先父盒子包住子盒子
<body> <div class="outbox"> <div class="box"></div> </div> </body>
方法一：设置距父盒子的margin-top/margin-left为父盒子宽度或长度-子盒子宽度或长度一半
<style> *{ padding: 0; margin: 0; } .outbox{ width:100px; height: 100px; background: chartreuse; border: 1px solid black; margin: auto; } .box{ width: 50px; height: 50px; background: red; margin-top: 25px; margin-left: 25px; } </style>
方法二：绝对定位距左距上50% margin-top和margin-left 各为负的宽高一半拉回来
<style> *{ padding: 0; margin: 0; } .outbox{ width:100px; height: 100px; background: chartreuse; border: 1px solid black; margin: auto; position: relative; } .box{ width: 50px; height: 50px; background: red; position: absolute; left:50%; top:50%; margin-left: -25px; margin-top: -25px; } </style>
方法三：magin:auto absolute然后距离左右上下都为0
<style> *{ padding: 0; margin: 0; } .outbox{ width:100px; height: 100px; background: chartreuse; border: 1px solid black; margin: auto; position: relative; } .box{ width: 50px; height: 50px; background: red; position: absolute; margin: auto; top:0; left:0; bottom:0; right:0 } </style>
方法四：利用table-cell（注意：只能用于ie8及其以上）属性 将父元素表格形式呈现 vertical-align显示为上下居中middle
<style> *{ padding: 0; margin: 0; } .outbox{ width:100px; height: 100px; background: chartreuse; border: 1px solid black; margin: auto; display: table-cell; vertical-align: middle; } .box{ width: 50px; height: 50px; background: red; margin: auto; } </style>
方法五：弹性布局居中 align-item:center垂直居中 justify-content:水平居中
<style> *{ padding: 0; margin: 0; } .outbox{ width:100px; height: 100px; background: chartreuse; border: 1px solid black; margin: auto; display:flex; align-items: center; justify-content: center; } .box{ width: 50px; height: 50px; background: red; } </style>
绝对定位的方式fixed可以如法炮制；当然我认为也可以用display:inline-block
