博客

方法一：flex布局

<div class="container">
	<div class="main">main</div>
</div>

.container{
	display:flex;
	justify-content:center;
	align-items: center;
	width:300px;
	height:300px;
	border: 5px solid #ccc;
}
.main{
	background: red;
}

方法二： flex布局 + margin

<div class="container">
	<div class="main">main</div>
</div>

.container{
	display:flex;
	width:300px;
	height:300px;
	border: 5px solid #ccc;
}
.main{
	margin: auto;
	background: red;
}

方法三： 相对定位

<div class="container">
	<div class="main">main</div>
</div>

.container{
	position: relative;
	width:300px;
	height:300px;
	border: 5px solid #ccc;
}
.main{
	position: absolute;
	left: 50%;
	top: 50%;
	transforn: translate(-50%,-50%);
	background: red;
}

方法四： 利用 display:table-cell

<div class="container">
	<div class="main">main</div>
</div>

.container{
	display: table-cell;
  	text-align: center;
  	vertical-align: middle;
	width:300px;
	height:300px;
	border: 5px solid #ccc;
}
.main{
	display: inline-block;
	background: red;
}