垂直居中

绝对定位垂直居中

<style>
    .bigbox{
        width: 100px;
        height: 100px;
        background-color: red;
        position: relative;
    }
    .smallbox{
        width: 50px;
        height: 50px;
        background-color: blue;
        position: absolute;
        top:50%;
        transform: translateY(-50%);
    }
</style>
<body>
<div class="bigbox">
    <div class="smallbox">
    </div>
</div>
</body>

图片垂直居中

vertical-align: middle;

 

上一篇:HTML+CSS基础(解决高度塌陷问题)


下一篇:CSS外边距合并