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

零下一度
零下一度 原创
2017-06-25 09:40:11 2108浏览

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

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

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

}

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

声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。