html浮动垂直居中对齐,详解如何垂直居中一个浮动元素

如何垂直居中一个浮动元素

// 方法一：已知元素的高宽

#div1{

width:200px;

height:200px;

position: absolute; /*父元素需要相对定位*/

top: 50%;

left: 50%;

margin-top:-100px ; /*二分之一的height，width*/

margin-left: -100px;

}

//方法二:未知元素的高宽

#div1{

width: 200px;

height: 200px;

margin:auto;

position: absolute; /*父元素需要相对定位*/

left: 0;

top: 0;

right: 0;

bottom: 0;

}

/*如何垂直居中一个(用更简便的方法。)*/

#container /*的容器设置如下*/

{

display:table-cell;

text-align:center;

vertical-align:middle;

}