html 结构

<div class="container">
<div class="content"></div>
</div>

css

.container{
width: 100%;
height: 100%;
text-align:center;
position: fixed;
}
.container:after {
display: inline-block;
content: '';
width:;
height: 100%;
vertical-align: middle;
}
.content{
width: 100px;
height: 100px;
display: inline-block;
vertical-align: middle;
background: blue;
}

纯css 图片自适应居中的更多相关文章

  1. 演示:纯CSS实现自适应布局表格

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  2. div等比例缩放-------纯CSS实现自适应浏览器宽度的正方形

    摘自:https://blog.csdn.net/u010513603/article/details/78200207 1.方案一:CSS3 vw 单位 CSS3 中新增了一组相对于可视区域百分比的 ...

  3. 纯CSS图片缩放后显示详细信息

    哎~!突然好久没更新博客了,最近总在下雨,晚上也经常没有时间来管理博客(目前在敲自己的一个平台,晢时还在写逻辑层的代码),好吧!废话不多说了,言归正传. 现在很多图片缩放的特效大多数都是用javasc ...

  4. CSS 图片自适应容器

    https://www.jb51.net/css/660677.html 经常有这样一个场景,需要让图片自适应容器的大小. 1.img标签的方式 我们马上就能想到,把width.height 设置为1 ...

  5. css 图片文字居中

    1.单行文字居中 2.多行文字居中 3.利用background-position:center;的图片居中 4.利用display:table-cell;属性的图片居中 <!DOCTYPE h ...

  6. 前端纯css 图片的模糊处理

    最近做的一个项目需要用到背景图的模糊处理,在网上查资料,发现用css的 filter 属性就可以解决,但是因为模糊度比较高,四周会有很长的模糊边,百度上也没找到解决的方法,,可喜的是最后我在分析一个d ...

  7. Css 图片自适应

    设置 CSS .container{ overflow:auto; } img{ width:100%; height:auto; overflow:hidden; } 设置 template < ...

  8. html5+css 图片自适应

    <div style="position:absolute; width:100%; height:100%; z-index:-1; left:0; top:0;"> ...

  9. 原创jQuery插件之图片自适应

    效果图例如以下: 功能:使图片自适应居中位于容器内 限制:容器须要给定大小 用法: 1.引入jQuery.然后引入fitimg插件 2.给须要图片自适应的容器固定宽高 3.header .accoun ...

随机推荐

  1. vscode 插件安装以及首选项配置

    1.插件 Auto Close Tag Path Intellisense Prettier Vetur vscode-icons Bracket Pair Colorizer 2.vscode 首选 ...

  2. binary-tree-level-order-traversal I、II——输出二叉树的数字序列

    I Given a binary tree, return the level order traversal of its nodes' values. (ie, from left to righ ...

  3. java要在命令行执行eclipse的项目的方法

    在命令行运行eclipse的项目时须要把该项目生成一个能够运行的jar包,才干够在命令行下运行:分为两种情况,一种是项目中没有调用第三方的jar包,这样的比較简单.网上的资源也非常多,本文主要讲述第二 ...

  4. 自己定义UITextField

    目的是实现例如以下的效果: UITextField的leftView是自己定义的UIView,当中: 1.包括一个居中显示的icon.而且上,左,下各有1px的间隙 2.左上和左下是圆角,右边没有圆角 ...

  5. 详谈kubernetes更新-2

    系列目录 本文详细探索deployment在滚动更新时候的行为 要详细探讨的参数描述: livenessProbe:存活性探测.判断pod是否已经停止 readinessProbe:就绪性探测.判断p ...

  6. Spring Boot + Spring Data JPA + PostgreSQL

    最近在用Java重写之前实习生用.netcore写的微信后台应用. 规定用Spring Boot框架,PostgreSQL数据库.之前一直习惯于基于XML的Spring app,也没用过Postgre ...

  7. mongoDB之监控工具mongotop

    mongotop也是mongodb-win32-x86_64-2.2.1\bin下的一个内置工具,mongotop提供了一个方法,用来跟踪一个MongoDB的实例,查看哪些大量的时间花费在读取和写入数 ...

  8. PHP基础函数、自定义函数以及数组

    2.10 星期五  我们已经真正开始学习PHP 了,今天的主要内容是php基础函数.自定义函数以及数组, 内容有点碎,但是对于初学者来说比较重要,下面是对今天所讲内容的整理:  1 php的基本语法和 ...

  9. HZNU 2154 ldh发奖金【字符串】

    题目链接 http://acm.hznu.edu.cn/OJ/problem.php?id=2154 思路 先判断不能拆分的情况 以为需要拆分成两个正整数 所以我们可以知道 只有个位的数字 是不能够拆 ...

  10. require实现单页应用程序(SPA)

    写了一个测试代码,用require.js配合它的一个插件text.js实现了最简单的单页应用程序,简单的记录一下,方便以后复习, git地址:https://github.com/lily1010/r ...