前两种方法称为大致居中，一般误差随高度的减小而减小，不过一般来说不怎么看得出来，除非你用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. 019 Linux tcpdump 抓包案例入门可真简单啊？

    目录 1 tcpdump 是什么? 2 tcpdump 常用命令参数 3 tcpdump 抓包wss,配合Wireshark分析 4 tcpdump 抓包白度,配合Wireshark分析) 5 tcp ...

  2. 利用POST请求模拟登录豆瓣

    需要用requests库 豆瓣上次更新后,就不能通过直接的requests.post()方式直接传递参数登录了.必须新建session,先GET请求,然后POST才能成功.原因未知 data参数中的四 ...

  3. 3. Java基础

    3.Java基础[基于IDEA] 3.1.快捷键 psvm 创建主方法 sout 打印 ctrl+d 复制当前行到下一行 alt+ender 创建局部变量,类: 3.2.注释,标识符,关键字 注释 平 ...

  4. laravel7 搜索关键字标红及手机号，身份证号隐藏

    控制器代码 public function index(Request $request) { //接受搜索关键字 $word = $request->get('name'); $start = ...

  5. think php 公共目录common.php json封装

    <?php function getJsonData($code,$massage,$data){ $result=[ 'code'=>$code, 'massage'=>$mass ...

  6. 总结一下Java基础知识

    重中之重-----------基础 底层结构决定上层建筑,所以,基础很重要. 自信心 在开始说基础之前先说明一下自信心的重要性,没有自信心学什么东西都学不好. 核心自信***** 核心自信从三个方面来 ...

  7. kafka 第一次小整理(草稿篇)————整理一下自己的认知

    前言 简单整理一些自己使用kafka的一些感受. 正文 一切都要回到真实的世界上, 计算机世界只是真实事件的一个缩影. 计算机世界有一个重要的东西,那就是数据库. 数据库记录着真实世界发生了什么,准确 ...

  8. TCP | 你真的懂 HTTP 吗？

    前言 Hello 大家好,我是 Sam Zhang. HTTP 相信是每个 Web 开发者都耳熟能详的名词了.但是,新手开发者想要完全理解 HTTP 协议却需要时间.这期视频,我就来带大家入门 HTT ...

  9. JavaWeb 03_创建servlet项目（详细）

    一.创建web项目 1. File--New--Project 2. 设置项目相关信息 3. 设置项目名称及工作空间 4. web项目目录结构如下 二.Servlet的实现 1. 新建包---类    ...

  10. notepad++给每一列数据加单引号及逗号结尾

    原始数据: 对列操作--先加前引号(光标放在第一行哦):编辑-->列块编辑 再加后引号和逗号(文本尾端不齐,就用替换): 打开替换窗口:ctrl+F(其实就是查找) 加完引号和逗号效果:(如果最 ...