CSS利用position实现水平垂直居中

HTML：

<div class="box">
	<div class="content">
		<div>内容1</div>
		<div>内容2</div>
	</div>
</div>

 

CSS：

.box {
    width: 200px;
    background: blue;
    position: relative;
    height: 200px
}

.content {
    padding: 5px 10px;
    color: white;
    width: fit-content;
    height: fit-content;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: red;
    margin: auto;
}

效果：