css div关于浏览器垂直居中

有些页面中间只有一个div，而且根据需求需要垂直居中，如下可以实现垂直居中。

html

<div class="con">
	<p>关于浏览器垂直居中</p>
	<div class="inner">中间主体内容</div>
</div>

css

body{min-width:1210px ;width:100%}

.con{
	with:1210px; 
	margin:0 auto; 
	position:absolute; 
	top:50%; 
	left:50%;
	transform:translate(-50%,-50%);
}

.inner:{
	width:1210px;
	height:600px;
	background-color:red;
}

如上是百度搜索的结果，确实可以实现盒子con的垂直居中，但是有一个问题，当浏览器的高度变小时，p标签中的内容会被inner覆盖，导致看不见p标签中内容。

这时候可以看一下body的高度为0。一个div块级元素没有主动为其设置宽度和高度，浏览器会为其分配可使用的最大宽度（比如全屏宽度），但不负责分配高度，块级元素的高度是由子元素堆砌撑起来的。那么，html和body标签的高度也都是由子级元素堆砌撑起来。

元素高度百分比需要向上遍历父标签要找到一个定值高度才能起作用，如果中途有个height为auto或是没有设置height属性，则高度百分比不起作用，此时的情况是父元素高度依赖子元素堆砌撑高，而子元素依赖父元素的定高起作用，互相依赖，却都无法依赖，死循环了。
那如何解决这个问题呢，可以让子元素先定高，这样是可以解决；但是如果子元素一定要依赖父元素高度呢？
上面的html代码可以看出，div的父元素是body，body的父元素是html，通过height:100%层层向上，找到顶级获取定高。
所以出现了html和body同时设置height:100%，那html的上级是谁呢？
通过上面的事实知道，浏览器负责分配块级元素宽度，那么浏览器也一定可以分配高度(只是没有做)，那么浏览器本身是有宽度和高度的，设置html的height:100%，就可以获取浏览器的定高了，后面的body和div也就有了依赖。

所以还需要对body和html设置高度

html{height:100%}

body{min-width:1210px;width:100%;position:relative;min-height:400px;height:100%}

参考：https://www.cnblogs.com/xiaoyuersdch/p/9156240.html