CSS垂直居中(未完待续。。。)

16-06-27 20:29

CSS垂直居中(未完待续。。。)

1、使用table

<table style="width:100%;height:100%;position:absolute;">
	<tbody>
		<tr>
			<td style="text-align:center; vertical-align:middle;">
				<div style="display: inline-block;*zoom:1;*display:inline; background:red;height:200px;">
					<div>
						sssss
						<p></p>
					</div>
				</div>
			</td>
		</tr>
	</tbody>
</table>

--经测试，Firefox，chrome,IE8以上，IE5.5成功居中显示

2、使用css3属性 flexbox

 <body style="padding:0;margin:0;">
<div style="position:absolute;width:100%;height:100%;border:1px solid red;display:flex;justify-content:center;align-items:center;">

<div style="border:1px solid #000;width:100px;height:100px;">111</div>

</div>
</body>

标题：CSS垂直居中(未完待续。。。)
作者：hugh0524
地址：https://blog.uproject.cn/articles/2016/06/27/1467027919791.html

hugh 的个人博客

CSS垂直居中(未完待续。。。)