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驱动案例之中的一个

    前几天解决一个嵌入式Linux驱动问题,做为一个案例进行记录. 本案例是一个CPU通过LocalBus总线訪问外围一个设备,详细设备是一个DSP器件.在实际应用中,性能要求非常高,对数据訪问速度提出比 ...

  2. Solaris网络基础

      划分子网: 把大网缩小为若干个小网.修改子网掩码,划分多个网络. 那么如何确定子网的子网掩码和IP地址? 以上你会发现少了6个IP.   Ifconfig e1000g0 down down掉网卡 ...

  3. css3: background-image使用多个背景图像

    CSS3 允许元素使用多个背景图像. background-image: url(img/ic_ms.png),url(img/icon_dutyfree_invite.png); <!DOCT ...

  4. 数据迁移实战:基于Kettle的Mysql到DB2的数据迁移

    From:https://my.oschina.net/simpleton/blog/525675 一.什么是ETL ETL,是英文 Extract-Transform-Load 的缩写,用来描述将数 ...

  5. Vb.net/VB 声明API函数实现父窗口功能

    回想第一次敲机房收费.自己调用了api函数实现了父窗口及其子窗口最小化的功能.现在再次遇到,自己就在思考,能不能继续使用API函数呢?答案当然是Of Course! 事实上细致看两者并没有多大的差别. ...

  6. Toad 使用中遇到的问题

    1:智能提示: 视图-->toad选项-->Editor-->Code Assist-->Toad Insight---->sort pick list alphabet ...

  7. nanonets

    https://app.nanonets.com/ List of Models IMAGES   Images: Image Categorization Beta Input: Image Out ...

  8. erlang启动参数记录

    不管在erlang的shell下还是脚本里,启动参数都是非常有用的,抽空儿整理下erlang的常用启动参数: +A size   异步线程池的线程数,范围为0~1024,默认为10 +P Number ...

  9. PythonCookBook笔记——字符串和文本

    字符串和文本 使用多个分隔符分割字串 使用正则re.split()方法. >>> line = 'asdf fjdk; afed, fjek,asdf, foo' >>& ...

  10. 导入EXCEL 时间数据为小数 问题

    同事在做将EXCEL导入数据库功能时发现一个奇怪的问题:在EXCEL中,有一列数据明明呈现出时间格式,比如:18:35,但导到数据库中,居然一串长长的小数:0.7743055555555556,我靠, ...