【手把手带你拿下垂直居中布局💗】

众所周知 水平居中很简单 margin:0 auto / text-align:center 就可以搞定

垂直居中 请往下看 见证奇迹的时刻来了 叮叮叮... 芝麻开门～～～

1.行高的设置line-height

直接设置为高度的大小就可以搞定。。

2.使用伪元素::before 高度设置100%

		<div class="container">
			<div class="redbox"></div>
			<div class="bluebox"></div>
		</div>
.container{
  width:200px;
  height:150px;
  border:1px solid blue;
  text-align:center;
}
.redbox{
  width:30px;
  height:30px;
  background:palevioletred;
  display:inline-block;
  vertical-align:middle;
}
.container::before{
  content:'';
  width:0;
  height:100%;
  display:inline-block;
  /* position:relative; */
  vertical-align:middle;
  background:greenyellow;
}
.bluebox{
  width:30px;
  height:40px;
  background:skyblue;
  display:inline-block;
  vertical-align:middle;
}

3.使用transform translateY

		<div class="container">
			<div class="bluebox"></div>
		</div>
.container{
  width:200px;
  height:150px;
  border:1px solid blue;
}
.bluebox{
  width:30px;
  height:40px;
  position: relative;
  top:50%;
  transform:translateY(-50%);
  background:skyblue;
}

4.flex布局

		<div class="container">
			<div class="bluebox"></div>
		</div>
.container{
	display:flex;
	align-items:center;
	justify-content:center;
	width:200px;
	height:150px;
	border:1px solid blue;
}
.bluebox{
  width:30px;
  height:40px;
  background:skyblue;
}