前两种方法称为大致居中，一般误差随高度的减小而减小，不过一般来说不怎么看得出来，除非你用javascript调用
offsetTop来查看。不然没有强迫症的比较难看出来。但是兼容性很好，尤其是table-cell的从IE6即可使用

1.使用table-cell处理图片间的关系

父元素使用display:table-cell; vertical:middle

子元素使用display:inline-block; vertical:middle;

即可简单使图片居中

2.使用line-height处理

父元素使用display:inline-block;height:300px;line-height:300px;vertical-align:middle;//这里的line-heiht要跟父元素大小一样；

子元素使用vertical-align:middle;

第三种称为绝对居中，不居中来找我，就是兼容性有点差，起码要IE9 才能兼容，一般的webkit也都没问题就是。随着ES6的泛滥，很快老旧的浏览器也就成了古董，所以这个居中方法也挺不错，就是对于兼容性很高的项目，最好不要使用。但是有问题的是，必须指定height，因为显然，这边计算的是下移50%的当前高度的Y轴。而前面两种方法不需要
3.使用translateY来垂直居中

父元素使用position:relative;height:400px;

子元素position:relative;transfrom:translateY(-50%);height:100px;top:50%;

以下是全部代码，自己找张demo.jpg做实验就可以

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>test</title>

</head>

<!--<link rel="stylesheet" href="./test.css">-->

<style>

    span {

        vertical-align: middle;

        width: 300px;

        height: 400px;

        display: inline-block;

        border: 1px red solid;

        line-height: 400px;

    }

    .middle {

        width: 100px;

        /*vertical-align: middle;*/

        position: relative;

    }

    .div {

        height: 400px;

        width: 500px;

        display: table-cell;

        vertical-align: middle;

        border: 1px solid red;

    }

    .big {

        width: 300px;

        height: 100px;

        position: relative;

        border: 1px red solid;

    }

    .small {

        width: 50px;

        height: 50px;

        position: relative;

        transform: translateY(-50%);

        top: 50%;

        border: 1px red solid;

        display: inline-block;

    }

</style>

<body>

    <span>

        <img class="middle" src="./img/1.jpg" alt="">a

        <img class="middle" src="./img/1.jpg" alt="">

    </span>-->

    <div class="div">

        <img class="middle" src="./img/1.jpg" alt="呵呵">

    </div>

    <div class="big">

        <div class="small"></div>

        <div class="small"></div>

        <div class="small"></div>

        <img src="./img/1.jpg" style="width:100px;" class="small"  alt="">

    </div>

    <script>

        //计算自己要计算的元素的位置判断是否居中。

        calc(true);

        function calc(flag) {

                var oheight = document.querySelector('.middle').offsetTop;

                alert(oheight)

        }

    </script>

</body>

</html>

部分idea 参考自以下文章

关于Css的垂直居中的一些方法的更多相关文章

  1. css实现垂直居中6种方法

    在一次次笔试,一次次的面试中,问到垂直居中的问题太多太多,但是我每一次回答,都好像都不能让面试官太满意,今天特意花点时间,整理一下css垂直居中问题. 1.如果是单行文本.看代码: <!DOCT ...

  2. 纯CSS实现垂直居中的7种方法

    今天申请博客通过了,给大家讲讲我所看到过的纯css实现垂直居中的各种方法.为什么要把它作为第一篇文章呢?因为这是我刚开始接触前端学到的对我最有用的知识,希望大家也可以从中获益! 在CSS中实现水平居中 ...

  3. CSS布局-垂直居中问题

    在前端页面的布局方面,很多时候需要用到垂直居中,如果父集元素或子元素的高度是固定的那么垂直居中可以用line-height或者定位 top:50%:margin-top:- height/2 px:实 ...

  4. 五种方法让CSS实现垂直居中

    利用 CSS 来实现对象的垂直居中有许多不同的方法,比较难的是选择那个正确的方法.我下面说明一下我看到的好的方法和怎么来创建一个好的居中网站. 使用 CSS 实现垂直居中并不容易.有些方法在一些浏览器 ...

  5. CSS实现垂直居中的5种方法

    利用 CSS 来实现对象的垂直居中有许多不同的方法,比较难的是选择那个正确的方法.我下面说明一下我看到的好的方法和怎么来创建一个好的居中网站. 使用 CSS 实现垂直居中并不容易.有些方法在一些浏览器 ...

  6. CSS 垂直居中5种方法

    利用 CSS 来实现对象的垂直居中有许多不同的方法,比较难的是选择那个正确的方法.我下面说明一下我看到的好的方法和怎么来创建一个好的居中网站. 使用 CSS 实现垂直居中并不容易.有些方法在一些浏览器 ...

  7. 转: css实现垂直居中的方法

    利用 CSS 来实现对象的垂直居中有许多不同的方法,比较难的是选择那个正确的方法.我下面说明一下我看到的好的方法和怎么来创建一个好的居中网站. 用 CSS 实现垂直居中并不容易.有些方法在一些浏览器中 ...

  8. 顽石系列：CSS实现垂直居中的五种方法

    顽石系列:CSS实现垂直居中的五种方法 在开发过程中,我们可能沿用或者试探性地去使用某种方法实现元素居中,但是对各种居中方法的以及使用场景很不清晰.参考的内容链接大概如下: 行内元素:https:// ...

  9. CSS里总算是有了一种简单的垂直居中布局的方法了

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

随机推荐

  1. WIN10:显示文件后缀.exe

  2. 进程&线程（一）——multiprocessing,threading

    本节内容为①进程线程的基础知识:②在Python的实现方法: 学习总结自: 一文看懂Python多进程与多线程编程(工作学习面试必读) - 知乎 multiprocessing 官方文档 1.进程线程 ...

  3. Linux常用文件权限命令详解

    pwd pwd命令用于获取当前工作目录的绝对路径. 使用示例: pwd 效果如下图: cd cd命令用于切换工作目录. 使用示例: cd 万猫学社/ 效果如下图: 其中在路径表示时, 一个半角句号(. ...

  4. Python 中的深浅拷贝

    Python 中的深浅拷贝 参考文献:https://blog.csdn.net/lnotime/article/details/81194633 参考文献:https://blog.csdn.net ...

  5. 统信DTK开发套件应用技术分享

    近年来,信创产业发展迅猛,国产软硬件适配的需求日益增加,但国内CPU架构种类繁多,导致大量的适配投入.同时,由于底层代码质量不同.代码实现风格不统一等问题,造成自研操作系统的应用开发门槛高,应用生态严 ...

  6. HelloWorld：通过demo，构建黑盒模型

    在<源码阅读四步走,这才是阅读源码的正确姿势>一文中,给出了源码阅读的完整步骤. 本篇是<如何高效阅读源码>专题的第四篇,正式开始讲解阅读源码的具体方法! 程序界有个老传统,学 ...

  7. Git拉取远程仓库代码并更新本地仓库

    1.git pull:获取最新代码到本地,并自动合并到当前分支 //查询当前远程分支 $ git remote -v //直接拉取并合并最新代码 $ git pull origin master [示 ...

  8. PAM学习小结

    PAM 目录 PAM 功能: 回文树 Fail指针 Trans指针 构建PAM 应用 P5496[模板]回文自动机(PAM) P4287[SHOI2011]双倍回文 P4555[国家集训队]最长双回文 ...

  9. 打靶笔记-03-vulhub-Moriarty Corp

    打靶笔记-03-vulhub-BoredHackerBlog 一.靶机信息 Name: BoredHackerBlog: Moriarty Corp(中-高级难度) Date release: 29 ...

  10. svn服务支持网页显示并增加在线预览功能，支持视频在线播放

    1.svn服务器支持网页显示 VisualSVN Server是一个非常不错的SVN Server程序,方便,直观,用户管理也异常方便.不过,它本身并没有提供在线修改密码的功能.由于在实际使用过程中, ...