前两种方法称为大致居中，一般误差随高度的减小而减小，不过一般来说不怎么看得出来，除非你用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. 释放linux内存中的cache缓存

    echo 3 > /proc/sys/vm/drop_caches 记一次 经常用  exp 导出oracle全量数据库,发现linux内存一直在减小没有释放,即使 oracle重启也不行,只有 ...

  2. omnet++：官方文档翻译总结（一）

    1.什么是omnet++ 翻译总结自:What is OMNeT++? omnet++是用来进行网络仿真的C++库和框架.这里的网络包括有线.无线.on-chip.queueing网络等等.特定领域中 ...

  3. MySQL第四讲

    昨日内容回顾 表与表之间建关系(外键) """ 表与表之间最多只有四种关系 一对多 多对多 一对一 没有关系 在确定表与表之间的关系的时候记住一句话 换位思考 " ...

  4. MySql日常解决错误

    MySql数据库导入sql错误 Unknown collation: 'utf8mb4_0900_ai_ci 导入语句:mysql -u root -p database < E:/SS/Tes ...

  5. Kubernetes概念及核心对象

    想学习更多相关知识请看博主的个人博客地址:https://blog.huli.com/ https://blog.huli.com/ 1.kubernetes快速入门 Kubernetes 集群将所有 ...

  6. Sublime Text 3 build 3103 注册码

    分享几个ST3的注册码,第一个我注册到自己电脑上,亲测可用,剩余几个没有测试.→原文链接 -– BEGIN LICENSE -–Michael BarnesSingle User LicenseEA7 ...

  7. CF1453D题解

    VP 的时候发现的一道数学题( 在思考这个问题之前,先让我们思考一件事:走到距离上一个存档点 \(n\) 的位置的期望是多少?(假设这个值为 \(f[n]\)) 先思考 \(f[1]\) 是多少,很明 ...

  8. vue项目部署到阿里云服务器(windows)，Nginx代理！

    项目构成: 前端:vue+vant-ui, 数据库:mysql, 后端:node.js 部署方式:nginx代理: 一,首先要拥有自己的服务器,阿里,腾讯都可以,我用的是阿里的: 如果只是做个人项目的 ...

  9. 除非Windows Activation Service (WAS)和万维网发布服务(W3SVC)均处于运行状态，否则无法启动网站。

    解决办法: 打开WINDOWS服务管理方法: 进入服务有二种方法: 1.开始-控制面板-管理工具单击,找到"服务"双击打开 在WINDOWS服务管理里 启动 World Wide ...

  10. AE功能扩展一

    1.添加栅格影像 基本思路:声明栅格工作空间→创建栅格数据集对象→创建金字塔→声明图层对象→刷新地图控件 private void AddBaseMap(string filepath) { IWor ...