控制元素居中核心代码为
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
css:
/* 容器 */ .wrap { position: relative; height: 600px; width: 500px; border: 1px solid #ccc; margin: 0 auto; } /* 需要居中的元素 */ .box { width: 200px; height: 200px; border: 1px solid #ccc; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; text-align: center; line-height: 200px; }
html:
<div class="wrap">
        <div class="box">
            我是居中的元素
        </div>
</div>
效果如下:

注:如果需要元素相对于整个页面居中可使用 固定定位 position: fixed; 或者其所有父级元素均不使用定位。
原文:https://www.cnblogs.com/gionlee/p/10628101.html