css实现水平垂直居中

行内元素

HTML代码：

<div class="container">
	<span class="main">行内元素</span>
</div>

css代码

• 方法一

 .container{
 	height:  200px;
  	text-align: center;  // 设置text-align属性，span元素水平居中
  }
  .main {
  	line-height:  200px;  //line-height设置为父元素的高度，span 元素垂直居中
  }

• 方法二

 .container{
   	position: relative;
   	height: 200px; 
   }
   .main{
   	position: absolute;
   	left: 50%;
   	top: 50%;
   	transform: translateX(-50%) translateY(-50%);
   }

块级元素

html代码：

<div class="container">
		<div class="main">块级元素</span>
	</div>

css代码：

• 方法一

.container{
		height: 200px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

• 方法二

  .container{
		position: relative;
		height: 200px; 
	}
	.main{
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translateX(-50%) translateY(-50%);
	}

细心的读者可以发现， 行内元素的方法二和块级元素的方法二是一样的， 那么可以这样说这种方法也是一种万能垂直居中法？

以上仅是罗列了两种不同情况的垂直居中方法， 然而，在实际开发中会遇到各种各样的状况， 例如：固高固宽，不定高不定宽…不同的情况有各种不同的解决方案，这更多的是需要我们不断去实践并选择出一种最佳的解决方案。