CSS实现已知宽高的div垂直居中；自适应高度两列布局

最近笔试经常碰到这个题，平时写代码好像很少思考这方面的，我来做一个小小的总结，以备面试之需。。

关于元素垂直布局方面的问题还有很多，而且面试很喜欢问，比如两列内容不同的布局，高度自适应。我也写出来。

一、元素垂直居中：

既然用css实现，高和宽应该都是定值吧，如果是根据内容调整的是需要借助js动态调整的。

<div id='div1'></div>

html,body{height:100%}

#div1{
position:absolute;
width:300px;
height:200px;
top:50%;left:50%;
background:red;
margin:-100px 0 0 -150px;
}

被定位的元素必须是绝对定位的，先设一个初始位置，左上角在页面正中间，再用margin偏移

向左偏移width/2 ； 向上偏移height/2 ；需要我们自己计算，然后元素就居中了。

这是相对于body的，如果这个div是相对于父元素居中，就把父元素的posi设成relative，元素就能相对于父元素定位了。

二、2列布局高度自适应

面试中有时候会问到display有哪些属性，常用的none,block,inline都能想到，我会容易忽略table相关的属性。

这个问题用表格属性写比较容易。

<div id='div2'>
	<div id='ch1'>
		<ol>
			<li>ddssd</li>
			<li>ddssd</li>
			<li>ddssd</li>
			<li>ddssd</li>
		</ol>
	</div>
	<div id='ch2'>
		<ol>
			<li>ddssd</li>
			<li>ddssd</li>
			<li>ddssd</li>
			<li>ddssd</li>
			<li>refe</li>
			<li>refe</li>
			<li>ddssd</li>
			<li>ddssd</li>
			<li>ddssd</li>
			<li>ddssd</li>
			<li>refe</li>
			<li>refe</li>
		</ol>
	</div>
</div>

#div2{width: 100%;display: table;}
#ch1{display: table-cell;background: red;}
#ch2{display: table-cell;background: blue;color: white;}

demo效果图：

最近被笔试面试虐的心力交瘁啊，我要是早点发愤图强就好了

只要肯学，每天都在进步，什么时候都不晚！！！

加油加油！！！