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. uva 11127(暴力)

    题意:给出一个字符串,包含0.1.*,当中×是能够替换成0或者1的,假设字符串的某个子串S有SSS这种连续反复3次出现,不是Triple-free串,问给出的字符串能够形成多少个非Triple-fre ...

  2. python(21)- python内置函数练习

    题目一:用map来处理字符串列表啊,把列表中所有人都变成sb,比方alex_sbname=['alex','wupeiqi','yuanhao'] name=['alex','wupeiqi','yu ...

  3. 第14章8节《MonkeyRunner源代码剖析》 HierarchyViewer实现原理-获取控件列表并建立控件树

    在上几节的描写叙述中,我们把HierarchyViewer初始化好.也把ViewServer给装备好了.那如今距离获得一个控件去操作它是万事具备仅仅欠东风了,欠了那一股春风了?欠了的是建立控件树这个东 ...

  4. 实习日记)select option 选择不同的option时, 页面发生不同的变化

    怎么在下拉框的选择不同的option时, 页面发生响应的变化 因为option是没有点击事件什么的,  只有select才有, 所以不能通过option的点击事件来完成, 所以开始的尝试都失败了(之前 ...

  5. (总结)Nginx配置文件nginx.conf中文具体解释

    #定义Nginx执行的用户和用户组 user www www; #nginx进程数,建议设置为等于CPU总核心数. worker_processes 8; #全局错误日志定义类型,[ debug | ...

  6. docker与jenkins学习

    docker命令: docker create <image-id>docker start <container-id>docker run <image-id> ...

  7. Android版App的控件元素定位

    前言 如何获取页面上各控件元素,无论是Web自动化还是App自动化,此步骤都是非常关键的! Web页面的控件元素可通过开发者选项(Chrome浏览器的F12)来协助定位,App端也是有相应的工具来协助 ...

  8. codeforces Looksery Cup 2015 H Degenerate Matrix

    The determinant of a matrix 2 × 2 is defined as follows: A matrix is called degenerate if its determ ...

  9. 发送get和post请求时常用的content-type

    常见的媒体格式类型如下: text/html : HTML格式 text/plain :纯文本格式 text/xml :  XML格式 image/gif :gif图片格式 image/jpeg :j ...

  10. 有返回值的Bookmark

    首先代码创建Activity: public sealed class WaitForResponse<TResult>:NativeActivity<TResult> { p ...