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. 搭建spark中需要注意的问题

    在搭建spark的过程中遇到了许多的问题,但是引起这些问题的原因都是因为环境变量没有设置好导致的,这里总结的一些优秀的博文,可以供以后参考 http://www.powerxing.com/insta ...

  2. web前端面试系列 - 算法( 数组去重 )

    1. 思路:设置一个临时数组temp,然后遍历要去重的数组arr,如果arr中的元素能够在temp中找到,则跳过此元素,否则将此元素存入temp,最后返回temp. 实现一 function uniq ...

  3. kubernetes之多容器pod以及通信

    系列目录 容器经常是为了解决单一的,窄范围的问题,比如说微服务.然而现实中,一些复杂问题的完成往往需要多个容器.这里我们讨论一下如何把多个容器放在同一个pod里以及容器间的通信 什么是pod pod是 ...

  4. oracle sql 当初始化数据时避免重复主键

    一:当有主键序列自动增长时候(序列为:seq_cct_id) insert into cs_cost_type (CCT_ID, CCT_NAME, CCT_RATE, CCT_RATE_TYPE, ...

  5. “懒”也要有境地---大部分程序猿都在的地方,再不来就out了。

    别人在玩.你也在玩,为什么别人天天进步,职业晋升. 而你则原地踏步. 事实上你和他的距离仅仅有一个微信公众号的距离. 假设你说.我根本没有时间学习,不想看书,我仅仅想睡觉.我想你要接着往下看,由于.谁 ...

  6. Operation not permitted - /usr/bin/pod

    问题描述:执行sudo gem install cocoapods, 提示出错:While executing gem ... (Errno::EPERM)     Operation not per ...

  7. 对于js里的闭包的理解

    Ali的回答: 当function里嵌套function时,内部的function可以访问外部function里的变量. function foo(x) {     var tmp = 3;      ...

  8. Xcode6 新特性

    苹果在WWDC 2014上对新版Xcode(Xcode 6 Beta版)并没有提及过多.但它却是开发人员不能忽视的一部分.Xcode 6 Beta版为设计和创建软件引入了新方法,更加关注功能和一些改善 ...

  9. Linux环境下安装MySQL(解压方式)

    1.将安装包放在服务器上:mysql-5.6.37-linux-glibc2.12-x86_64.tar.gz 2.将安装包解压:tar -zxvf mysql-5.6.37-linux-glibc2 ...

  10. Linux随笔-鸟哥Linux服务器篇学习总结(全)

    作者:Danbo 时间:2015-7-17 在runlevel3启动级别下默认启动网络挂载(autofs)机制,我们可以通过命令将其关闭:chkconfig autofs off 或者 /etc/in ...