外面一个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>

效果如下

子元素的大小可以随意调整, 都是居中显示的

div里面的图片垂直居中的更多相关文章

  1. 浮动div中的图片垂直居中

    table-cell方法垂直水平居中 <!DOCTYPE html> <html> <head> <meta name="description&q ...

  2. div+css:div中图片垂直居中

    div中图片垂直居中 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> &l ...

  3. div图片垂直居中 如何使div中图片垂直居中

    (从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期 2014-04-03) 『此方法在ie7下,如果.box的高度为800等比较大的数值时,并不能起到垂直居中的作用.』 点评:关于图片垂 ...

  4. div图片垂直居中

    div相对与table对于图片的垂直居中支持的并不好,特别对于不同浏览器的兼容性来说,这里我们看下一个简洁的css解决方法: 在曾经的 淘宝UED 招聘 中有这样一道题目: “使用纯CSS实现未知尺寸 ...

  5. DIV里面的图片水平与垂直居中的方法

    <div class=“box”> <img /> </div> 1.水平居中: 1)box设置  text-align:center ;    text-alig ...

  6. DIV或者DIV里面的图片水平与垂直居中的方法

    <div class=“box”> <img /> </div> 水平居中的常用方式: text-align:center ——这可以实现子元素字体,图片的水平居中 ...

  7. div 内 图片 垂直居中

    vertical-align属性适用于 line-block: <div class="title"> <img src="img_p1_title.p ...

  8. 让图片在div盒子中水平垂直居中

    //调整多张图片,让图片水平垂直居中 function adjustImg(){ let imgDiv = document.getElementsByClassName("img" ...

  9. DIV元素水平和垂直居中

    在前端开发过程中,经常要对元素进行居中设置.一般有水平居中,和垂直居中.一般设置水平居中简单.基本是margin:0 auto,就可以了.但是垂直居中,我们有时会觉得使用vertical-align, ...

随机推荐

  1. BZOJ 3143: [Hnoi2013]游走 [概率DP 高斯消元]

    一个无向连通图,顶点从1编号到N,边从1编号到M. 小Z在该图上进行随机游走,初始时小Z在1号顶点,每一步小Z以相等的概率随机选 择当前顶点的某条边,沿着这条边走到下一个顶点,获得等于这条边的编号的分 ...

  2. BCDEdit命令添加WinPE启动项

    bcdedit /create {ffffffff-8d96-11de-8e71-ffffffffffff} /d "系统维护" /device bcdedit /create   ...

  3. Docker 中国官方镜像加速

    参考:https://www.docker-cn.com/registry-mirror 通过 Docker 官方镜像加速,中国区用户能够快速访问最流行的 Docker 镜像.该镜像托管于中国大陆,本 ...

  4. Scoping the Project for iOS 7

    Scoping the Project On This Page Things Every App Must Do Things Every App Should Do If You Must Con ...

  5. FlashSocke 通过flash进行socket通信(as代码)

    在早期的项目中, 因为需要用IE上连接socket进行通信, 所以不得不借助于flash的socket功能,于是有了下面这个`FlashSocke`,供JavaScript调用 和 回调JavaScr ...

  6. 拥抱.NET Core系列：MemoryCache 初识

    Cache是一个绝大多数项目会用到的一个技术,说起到缓存可能就联想到 Set.Add.Get.Remove.Clear 这几个方法.那么在.NET Core中微软给我们带来了什么样的缓存体验呢?今天我 ...

  7. Js比较对Object类型进行排序

    <script> var data=[{name:"121",age:"18",year:"2018"},{name:" ...

  8. Yii2按需加载图片怎么做？

    按需加载图片应该用 jQuery LazyLoad 图片延迟加载按需加载文件夹应该用 Yii::import

  9. es6之let和const命令的一些笔记

    let和const命令 let命令 基本用法 let命令用来声明变量,声明的变量只在命令所在的代码块内有效.for循环中很适合使用let命令. 有必要理解的例子: var a = []; for (v ...

  10. poj 3278 简单BFS

    题意:给定农夫和奶牛的初始位置,农夫可以当前位置+1.-1.*2三种移动方式,问最少需要多少分钟抓住奶牛 AC代码: #include<cstdio> #include<cstrin ...