当前位置:Gxlcms > html代码 > 详解如何垂直居中一个浮动元素

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

时间:2021-07-01 10:21:17 帮助过:78人阅读

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

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

#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;

}

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

#container /*<img>的容器设置如下*/

{

display:table-cell;

text-align:center;

vertical-align:middle;

}

以上就是详解如何垂直居中一个浮动元素的详细内容,更多请关注Gxl网其它相关文章!

人气教程排行