前两种方法称为大致居中，一般误差随高度的减小而减小，不过一般来说不怎么看得出来，除非你用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. docker入门-docker应用场景和优势

    一.什么是docker Docker是一个使用 Go 语言开发的,并且开源的应用容器引擎,基于LXC(Linux Container)内核虚拟化技术实现,提供一系列更强的功能,比如镜像.Dockerf ...

  2. C# 爬取图片

    网络收集整理  爬取图片 引用AngleSharp  NuGet 包 using AngleSharp; using System; using System.Collections.Generic; ...

  3. 微信小程序商品发布

    <!--pages/good/good.wxml--> <!--商品发布--> <form bindsubmit="formSubmit"> & ...

  4. thinkphp 添加数据

    ....控制器方法返回视图 public function create() { // return view(); } ...............表单页面 <!DOCTYPE html&g ...

  5. PHP动态修改配置文件

    文件结构: index.php 主页 config 配置文件 doUpdate.php 修改功能页 index.php <html> <head> <title>修 ...

  6. ESXI 虚拟化误删除管理端口Management Network (vmk0)，导致无法访问后台解决方案

    按F2开启控制台shell,启用后返回.按Alt+F1打开终端. 输入 esxcfg-vmknic -a -i 192.168.1.10 -n 255.255.255.0 "Manageme ...

  7. Python的编译安装

    到 Python 官网下载 Python3 curl -O https://www.python.org/ftp/python/3.7.4/Python-3.7.4.tgz 安装依赖 sudo apt ...

  8. 云原生入门 第五章：kubernetes学习实践

    1. 简介 在本章中,我们将学习不同的Kubernetes对象,它们的用途以及如何与它们交互. 在设置集群或使用现有集群之后,我们可以开始部署一些工作负载.Kubernetes中最小的计算单元不是一个 ...

  9. 新建vue3.0 项目—步骤详细介绍

    一.环境搭建 1.安装node环境(版本≥ 8.9) 2.安装vue-cli3.0 npm install @vue/cli -g 此处省略安装步骤截图了,相信各位都已装好了,下图为查看版本结果: 二 ...

  10. 实现一个cache

    实现一个LRU cache,定义get函数和set函数,cache是固定长度的,当cache已经满,那么就删除一直没有被更新的记录,然后将新的记录放进去. LRU: 全称是Least Recently ...