用css让元素水平垂直居中几种方法

1.行级和块级是什么那？

针对小白和小白面试人群首先说一些题外话，那就说一下博主大四上半年去一家公司面试的尴尬事吧。 哈哈~~我记得那是我第一次打印简历正式面试的第一家，那个哥可以说很面善，人狠话不多，面对着自信满满（渣到爆）的我，第一个问题问我行元素块元素的区别，我一想，这个我会啊，可是以我当时的想法我只能举例子啊，那就说P是行元素吧，DIV是块元素吧，哈哈哈，面试大哥都笑了，哈哈哈，现在想起来我也想笑，那么现在就先说一下行元素和块元素吧！
行元素：内容决定所占空间的多少，内容多少就占多少空间。不能设置宽高（默认宽高是0）。margin垂直方向无效。
常见的行元素：span, a, b, i, u, font, sub, sup

块元素：不管内容多少，块元素都会在浏览器中独占一行，可以设置宽高，如果不设置宽高那么宽就是100%（占满父级元素的一整行）
常见的块元素： div, h1-h6, p, ul, li, ol, dl, dt, hr, form, table,tr, td

行级块元素： 共享一行，可以设置宽高，可以设置margin, padding。
常见的行级块元素： img, input

那么现在我们就来戳重点啦~

2.行级元素水平垂直居中的方法

我们知道行级元素不能设置宽高，那怎样让单行元素居中，如下代码：

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

那么怎样让多行元素居中，如下代码：

display: table-cell;
width: 200px;
height:150px;
border:1px solid blue;
vertical-align: middle; 

3.块级元素水平垂直居中的方法

我们知道块级元素可以设置宽高，自然就可以有很多种方法让块元素垂直居中：

1. 绝对定位 ，（不知道块元素的宽高是多少时）；

div{
	position:absolute;
	left:50%;
	top:50%;
	transform:translate(-50%, -50%);
}

2. 绝对定位 ，（已知块元素的宽高是多少时1）；

div{
	position:absolute;
	width:600px;
	height:600px;
	left:50%;
	top:50%;
	margin-top:-300px;
	margin-left:-300px;
}

3. 绝对定位 ，（已知块元素的宽高是多少时2）；

div{
	position:absolute;
	width:600px;
	height:600px;
	left:0;
	top:0;
	right:0;
	bottom:0;
	margin:auto;
}

4. flex布局 ，（给当前元素的父级添加）；

//html
<div class="father">
   <div class="son"></div>
</div>
/**css**/
.father{
   height:800px;
   -webkit-display:flex;
   display:flex;
   -webkit-align-items:center;
   align-items:center;
   -webkit-justify-content:center;
   justify-content:center;
   border:1px solid #ccc;
}
.son{
	width:600px;
	height:600px;
}

5. table-cell实现水平垂直居中

//html
<div class="table-cell">
   <p>我爱你</p>
</div>
/**css**/
.table-cell {
   display: table-cell;
   vertical-align: middle;
   text-align: center;
   width: 240px;
   height: 180px;
   border:1px solid #666;
}

6. 绝对定位 (calc() 函数动态计算实现水平垂直居中)

/**css**/
.parent{
   border: 1px solid red;
   width: 400px;
   height: 400px;
   position: relative;
}
.child{
   background: green;
   position: absolute;
   top: calc(50% - 100px);
   left: calc(50% - 100px);
}
.child.size{
   width: 200px;
   height: 200px;
   
}

6. grid (网格布局)

/**css**/
.parent{
   display: grid;
}
.child{
   align-self: center;
   justify-self: center;
}

目前知道的就是这些方法啦，水平垂直剧中是页面最常用到的，例如：弹出框，按钮等等，我这里只是写出了几种，还有很多水平垂直的方法，希望大家来帮忙补充哈~
第一次写博客，紧张之下如有错误希望得到更改通知。
那请多指教！