【持续更新】CSS居中

时间:2019-03-19
本文章向大家介绍【持续更新】CSS居中，主要包括【持续更新】CSS居中使用实例、应用技巧、基本知识点总结和需要注意事项，具有一定的参考价值，需要的朋友可以参考一下。

水平垂直居中

  • 知道自身的宽度、高度
<div class="test"></div>
<style>
    .test {
        position: absolute;
        height: 200px;
        width: 200px;
        left: 50%; /* 父级宽度的50% */
        top: 50%; /* 父级高度的50% */
        margin-left: -100px;
        margin-top: -100px;
        border: 1px solid #000000; /* 方便看效果 */
    }
</style>

原理：先水平、垂直定位到父级的中间(父级宽度和高度的一半)，再向左、上平移自身宽度、高度的一半，即可完成水平、垂直居中。

  • 不知道自身的宽度、高度
<div class="test"></div>
<style>
    .test {
        position: absolute;
        height: 200px;
        width: 200px;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        border: 1px solid #000000; /* 方便看效果 */
    }
</style>

原理：同上一种方法一样，先水平、垂直定位到父级的中间(父级宽度和高度的一半)，再向左、上平移自身宽度、高度的一半，而translate里面是自身的百分百，所以不需要知道自身的宽度。

随机文章
WEB前端知识点必读
最近更新