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

Posted 2020-08-15 时念唯梦

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28

// 方法一：已知元素的高宽 #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>?（用更简便的方法。）

1 2 3 4 5 6

#container     //<img>的容器设置如下 {     display:table-cell;     text-align:center;     vertical-align:middle; }