css控制元素动态水平/垂直居中

元素动态垂直居中

html:

	<div class="login">
		<div>你好</div>
	</div>

css:

.login {
    display: table;
}
.login div{
   display: table-cell;
   vertical-align: middle;
}

效果图:

注:虽然可以实现动态居中,但是元素的padding自动填满上下空间,因此改变元素的背景,它的背景颜色会占满整个空间。要注意它的局限性。

元素动态垂直居中      

html:    

	<div class="login">
		<div>你好</div>
	</div>

  css:

.login div{
    display: table-cell;
    vertical-align: middle;
}

 效果图:

注:无副作用的水平动态居中方法。