CSS样式设置div水平垂直居中

最近在实习，做的是前端开发的工作，不止一次遇到了需要行元素水平垂直居中的问题，我自己css基础一般，写逻辑的能力比较强，于是百度了一下，大多都是下面第一种解决方案：

方案一

text-align: center;
height: 100px;
line-height: 100px;

主要是利用行高 = div高度的方式来解决垂直居中，但是只适用于仅有一行的内容，遇到多行的内容，flex布局则会更加方便，

方案二

display: flex; 
flex-direction: column; 	//flex显示方向
justify-content: center; 	//flex水平居中
align-items: center			//flex垂直居中

flex实现水平垂直居中更加简洁