元素水平垂直居中实现方式

页面结构

<div class="wrap">
	<div class="inner">
	</div>
</div>

1.定位实现

	.wrap {
        width: 300px;
        height: 300px;
        position: relative;
        background-color: yellowgreen;
    }

    .inner {
        width: 50px;
        height: 50px;
        position: absolute;
        top: 50%;
        left: 50%;
        background-color: greenyellow;
        margin: -25px 0 0 -25px;
    }

2.定位 + transform

	.wrap {
        width: 300px;
        height: 300px;
        position: relative;
        background-color: yellowgreen;
    }

    .inner {
        width: 50px;
        height: 50px;
        position: absolute;
        top: 50%;
        left: 50%;
        background-color: greenyellow;
        transform: translate(-50%, -50%);
    }

3.flex布局实现

	.wrap {
        width: 300px;
        height: 300px;
        background-color: yellowgreen;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .inner {
        width: 50px;
        height: 50px;
        background-color: greenyellow;
    }

4.display: grid

.wrap {
        width: 300px;
        height: 300px;
        background-color: yellowgreen;
        display: grid;
    }

    .inner {
        width: 50px;
        height: 50px;
        background-color: greenyellow;
        justify-self: center;
        align-self: center;
    }

关注微博、微信公众号搜索前端小木，让我们一起学习成长。