Html:

<div id="MainContent"><img src="QQ截图20150515140512.png" width="" height=""></img></div>

  </div>

CSS:

#MainContent {

    display:table-cell;

    width: 700px;

    height: 800px;

    background: #0C78DD;

    text-align:center;

    vertical-align:middle; 

}

img 父元素有浮动属性的 话垂直对齐实现不了

CSS图片水平垂直居中的更多相关文章

  1. CSS制作图片水平垂直居中

    所谓的图片水平垂直居中就是把图片放在一个容器元素中(容器大于图片尺寸或是指定了大小的容器),并且图片位居此容器正中间(中间是指元素容器的正中间),而图片不是以背景图片(background-image ...

  2. css实现图片水平垂直居中

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. CSS制作水平垂直居中对齐

    作为前端攻城师,在制作Web页面时都有碰到CSS制作水平垂直居中,我想大家都有研究过或者写过,特别的其中的垂直居中,更是让人烦恼.这段时间,我收集了几种不同的方式制作垂直居中方法,但每种方法各有千秋呀 ...

  4. 图片水平垂直居中（兼容IE6，IE7，firefox，opera，safari，其中图片可以是任何块元素）

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. css实现水平 垂直居中

    css实现水平居中 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  6. CSS制作水平垂直居中对齐 多种方式各有千秋

    作为前端攻城师,在制作Web页面时都有碰到CSS制作水平垂直居中,我想大家都有研究过或者写过,特别的其中的垂直居中,更是让人烦恼.这段时间,我收 集了几种不同的方式制作垂直居中方法,但每种方法各有千秋 ...

  7. CSS如何水平垂直居中？

    CSS如何水平垂直居中? 1.CSS如何实现水平居中? margin: 0 auto 2.CSS如何实现水平垂直居中? 首先设置一个div元素,设置背景颜色以便看出变化.代码如下: <!DOCT ...

  8. CSS实现水平|垂直居中漫谈

    利用CSS进行元素的水平居中,比较简单,手到擒来:行级元素设置其父元素的text-align center,块级元素设置其本身的left 和 right margins为auto即可.而撸起垂直居中, ...

  9. 纯CSS制作水平垂直居中“十字架”

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. hdu 6058---Kanade's sum（链表）

    题目链接 Problem Description Give you an array A[1..n]of length n. Let f(l,r,k) be the k-th largest elem ...

  2. HDU 6022---MG loves set（K-D树）

    题目链接 Problem Description MG is an intelligent boy. One day he was challenged by the famous master ca ...

  3. oracle中常见的查询操作

    普通查询:select * from t; 去除重复值:select distinct f1,f2 from t; between用法:select * from t where f1 not/bet ...

  4. Django--模板层template

    一 模版简介 你可能已经注意到我们在例子视图中返回文本的方式有点特别. 也就是说,HTML被直接硬编码在 Python代码之中. def current_datetime(request): now ...

  5. 从零开始学 Web 之 CSS3（四）边框图片，过渡

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  6. ContentProvider使用总结

    近日来学习ContentProvider相关的知识,做了一个demo,想和网友分享下. 首先说一点相关的知识: 一:作用 ContentProvider是不同应用程序共享数据的接口,跟共享数据的别的方 ...

  7. LoadRuner12.53教程(三)

    教训1:建立一个Vuser Script jiào教   xùn训   1   :   jiàn建   lì立   yī一   gè个   V   u   s   e   r   S   c   r ...

  8. 方便操作的命名范围scope

    <?php namespace Goods\Model; use Think\Model; class GoodsModel extends Model { protected $_scope ...

  9. JavaWeb学习（二十三）———Filter(过滤器)

    一.Filter简介 Filter也称之为过滤器,它是Servlet技术中最激动人心的技术,WEB开发人员通过Filter技术,对web服务器管理的所有web资源:例如Jsp, Servlet, 静态 ...

  10. Jenkins持续集成学习-Windows环境进行.Net开发4

    目录 Jenkins持续集成学习-Windows环境进行.Net开发4 目录 前言 目标 Github持续集成 提交代码到Github 从Github更新代码 git上显示构建状态 自动触发构建 Gi ...