外面一个div, 里面是一张大小不固定的图片, 或者span,div都行, 要实现里面元素水平垂直居中对齐
其实有很多实现的方法, 比如用js去计算每一个子元素的高度, 通过js去动态设置magin值, 不过这有点麻烦
今天分享一种用css实现的水平垂直居中对齐
看代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .box { height: 300px; width: 300px; margin-top: 80px; background-color: #ccc; text-align: center; } .box:after { content: ""; display: inline-block; width: 0; height: 100%; vertical-align: middle; } .img { display: inline-block; /*如果是图片就不用写着一条, 如果不是图片必须加上*/ vertical-align: middle; height: 100px; width: 100px; background-color: #f66; } </style> </head> <body> <div class="box"> <div class="img"></div> </div> </body> </html>
效果如下
子元素的大小可以随意调整, 都是居中显示的