实现水平垂直居中的方法有很多，在这里我只介绍两种易用且常见的方法，这两种方法对于固定宽高和不定宽高都有效。
1、transform 方案
// html部分 <div class="container"> <div class="box">box</div> </div> // css部分 .container{ position: relative; width: 500px; height: 500px; border: 1px solid #000; } .box{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) }2、flexbox 方案
// html部分 <div class="container"> <div class="box">box</div> </div> // css部分 .container{ position: relative; width: 500px; height: 500px; border: 1px solid #000; display: flex; // 设置flex justify-content: center; // 主轴居中 align-items: center; // 交叉轴居中 } .box{ }
转载于:https://www.cnblogs.com/00feixi/p/11269713.html
