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. 【KMP】hdu1867(A + B for you again) 杭电java a题真坑

    点击打开链接 Problem Description Generally speaking, there are a lot of problems about strings processing. ...

  2. PHP工作模型与运行机制

    PHP的工作模型非常特殊.从某种程度上说,PHP和ASP.ASP.NET.JSP/Servlet等流行的Web技术,有着本质上的区别.   以Java为例,Java在Web应用领域,有两种技术:Jav ...

  3. leetCode(40):Path Sum

    Given a binary tree and a sum, determine if the tree has a root-to-leaf path such that adding up all ...

  4. 【软件创意】智能Goals (android)

    智能Goals  软件创意核心思想:实现你的愿望. 功能概要:帮助记录奋斗了的历程.实现你的愿望.可以是跑步减肥,每天阅读,交际,存钱买房.满足各种记录需要,目标可以是完成多长时间,可以用计时器:可以 ...

  5. 《好好说话》zz

    最近,<奇葩说>闹出来了一些不愉快. 在半决赛中,姜思达惜败,愤怒的粉丝把矛头指向那场比赛的其他人.最终,马薇薇.黄执中和网友们吵起来了. 这件事本不算大事,毕竟娱乐业就是这个样子.刚刚好 ...

  6. datatable的使用

    学习可参考:http://www.guoxk.com/node/jquery-datatables http://yuemeiqing2008-163-com.iteye.com/blog/20069 ...

  7. HTML marquee标签

    marquee语法    <marquee></marquee> 实例一<marquee>Hello, World</marquee> marquee常 ...

  8. JMeter中使用Put请求方式请求接口

    前言 现在有如下接口,是以PUT的方式请求的: 请求URL:IP+Port+/api/v1/apps/{appId} 请求参数: 参数名 必选 类型 nameCn 是 string nameEn 是 ...

  9. 使用无缓冲IO函数读写文件

    前言 本文介绍使用无缓冲IO函数进行文件读写. 所谓的无缓冲是指该IO函数通过调用系统调用实现,其实系统调用内部的读写实现也是使用了缓冲技术的. 读写步骤 1. 打开文件 open 函数 2. 读写文 ...

  10. Two-Factor Authentication 2FA

    About two-factor authentication - User Documentation https://help.github.com/articles/about-two-fact ...