前两种方法称为大致居中，一般误差随高度的减小而减小，不过一般来说不怎么看得出来，除非你用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的用户与用户组管理

    1.Linux用户与用户组 Linux 是多用户多任务操作系统,Linux 系统支持多个用户在同一时间内登陆,不同用户可以执行不同的任务,并且互不影响.不同用户具有不问的权限,毎个用户在权限允许的范围 ...

  2. websocket原理和基于c/c++实现的websocket协议栈（更新中）

    参考: 博客1:http://blog.sina.com.cn/s/blog_bf397e780102w25k.html https://www.cnblogs.com/barrywxx/p/7412 ...

  3. C#集合，字典的运用

    三个题解释所有 using System;using System.Collections.Generic;using System.Linq;using System.Text;using Syst ...

  4. LeetCode-046-全排列

    全排列 题目描述:给定一个不含重复数字的数组 nums ,返回其 所有可能的全排列 .你可以 按任意顺序 返回答案. 示例说明请见LeetCode官网. 来源:力扣(LeetCode) 链接:http ...

  5. 泛型的类型擦除后，fastjson反序列化时如何还原？

    原创:微信公众号 码农参上,欢迎分享,转载请保留出处. 哈喽大家好啊,我是Hydra~ 在前面的文章中,我们讲过Java中泛型的类型擦除,不过有小伙伴在后台留言提出了一个问题,带有泛型的实体的反序列化 ...

  6. [k8s] k8s基于csi使用rbd存储

    描述 ceph-csi扩展各种存储类型的卷的管理能力,实现第三方存储ceph的各种操作能力与k8s存储系统的结合.通过 ceph-csi 使用 ceph rbd块设备,它动态地提供rbd以支持 Kub ...

  7. 如何为k8s中的pod配置QoS等级？

    1.概述 本文介绍如何为pod分配特定的QoS等级. 我们知道,在k8s的环境中,通过使用QoS等级来做决定,在资源紧张的时候,将哪些的pod进行驱逐,或者说如何对pod进行调度. OK,话不多说,让 ...

  8. 新的ASP.NET Core 迁移指南

    最近在微信里做了一个调查: Web Forms应用程序升级到.NET 6, 收到550份调查,调查还在继续,欢迎参与调查.可以访问链接:https://wj.qq.com/s2/9822949/ac3 ...

  9. Kernel pwn 基础教程之 ret2usr 与 bypass_smep

    一.前言 在我们的pwn学习过程中,能够很明显的感觉到开发人员们为了阻止某些利用手段而增加的保护机制,往往这些保护机制又会引发出新的bypass技巧,像是我们非常熟悉的Shellcode与NX,NX与 ...

  10. Java GUI 实现发送邮件以及附件

    实现代码: 注意点: 需要的jar包:JavaMail API 和Java Activation Framework (JAF) ,下载可参考菜鸟教程 默认使用QQ邮箱发送,需要设置授权,设置--&g ...