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. LINUX下GDB反汇编和调试

    Linux下的汇编与Windows汇编最大的不同就是第一个操作数是原操作数,第二个是目的操作数.而Windows下却是相反. 1. 基本操作指令 简单的操作数类型说明.一般有三种. (1)马上数操作数 ...

  2. JD笔试试题(凭记忆写的+人生感悟 try finally )

    京东笔试:技术篇(一套卷.包含測试.算法,研发) 一:填空题(4分 * 15) 15 个 涉及的面很广的选择题,可是比較側重基础.包含数据结构的.c++类的,操作系统的,计算机网络的. 二:编程题(2 ...

  3. d3js 画布 概念

    HTML 5 提供两种强有力的“画布”:SVG 和 Canvas. SVG 有如下特点: SVG 绘制的是矢量图,因此对图像进行放大不会失真. 基于 XML,可以为每个元素添加 JavaScript ...

  4. Populating Next Right Pointers in Each Node I, II——生成next树

    1. Given a binary tree struct TreeLinkNode { TreeLinkNode *left; TreeLinkNode *right; TreeLinkNode * ...

  5. MySQL双主热备问题处理

    1. Slave_IO_Running: No mysql> show slave status\G *************************** 1. row *********** ...

  6. Android_动态权限管理的解决方式

    本博文为子墨原创.转载请注明出处! http://blog.csdn.net/zimo2013/article/details/50478201 1.前言 (1).因为MIUI等部分国产定制系统也有权 ...

  7. 升级OpenSSL修复高危漏洞Heartbleed

    升级OpenSSL修复高危漏洞Heartbleed 背景:          OpenSSL全称为Secure Socket Layer.是Netscape所研发.利用数据加密(Encryption) ...

  8. HDU1009_FatMouse&#39; Trade【贪心】【水题】

    FatMouse' Trade Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) ...

  9. PE添加Style

       1. <style id="NumberStyle"> <setting> <param name="option"> ...

  10. TXT文本写入数据库

    load data local infile "D:/abc.txt" into table lee; leedabao.txt内容如下,中间用Tab隔开: 2 yuanpeng ...