方法一

.demo1 { width:180px; height:180px; line-height:180px; *font-size:160px; border:1px solid #ddd; text-align:center;}
.demo1 img { vertical-align:middle;}

方法二

.demo2 { width:180px; height:180px; display:table-cell; vertical-align:middle; *font-size:160px; border:1px solid #ddd; text-align:center;}
.demo2 img { vertical-align:middle;}

方法三

.demo3 { display:table; position:relative; text-align:center; height:180px; width:180px; border:1px solid #ddd;}
.demo3_inner { display:table-cell; vertical-align:middle; position:absolute; top:50%;}
.demo3_inner img { position:relative; top:-50%; left:-50%;}
.demo3 >/**/ .demo3_inner { position:static;}
.demo3 >/**/ .demo3_inner > img { position:static;}

文字

.demo4 { display:table; position:relative; text-align:center; height:180px; width:180px; border:1px solid #ddd;}
.demo4_inner { display:table-cell; vertical-align:middle; position:absolute; top:50%;}
.demo4_inner p { position:relative; top:-50%; left:-50%;}
.demo4 >/**/ .demo4_inner { position:static;}
.demo4 >/**/ .demo4_inner > p { position:static;}

(转载)css垂直水平居中的整理的更多相关文章

  1. CSS垂直水平居中方法整理

    CSS定位中常常用到垂直居中,比如覆盖层上的弹框. 兼容性比较好的方法: <!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transition ...

  2. CSS垂直水平居中方法总结

    在布局的时候经常能用到居中,在此总结一下 html结构: <div class="wrap"> <div class="content"> ...

  3. 关于css垂直水平居中的几种方式

    css中元素的垂直水平居中是比较常见及较常使用的,在这里向大家介绍一下几种方式. 1.水平居中 margin: 0 auto; 效果图: 而文字的垂直水平居中也比较简单,加上line-height: ...

  4. css 垂直+水平居中

    垂直+水平居中是一个老生常谈的问题了,现在就固定高度和不固定高度两种情况去讨论 1.父盒子固定高度[定位] 实现1: father-box: position:relative child-box:p ...

  5. css 垂直水平居中总结

    一.前言: 垂直居中有很多方式,我们要做的不是写出完美代码,而是在合适的情况下根据需求选择合适方式. 主要方式: line-height 绝对定位 表格 display:table-cell 主要需求 ...

  6. css垂直水平居中方案

    1. 水平居中 如果是inline元素:在父元素上面设置text-align:center; 如果是block元素:设置宽度和margin:0 auto; 如果是多块级元素:在父元素上面设置text- ...

  7. CSS垂直水平居中

    小小的总结一下:行内元素水平居中用text-align: center;块级元素水平居中用margin-left: auto; margin-right: auto; 首先讨论一下单行时的情况. 毫无 ...

  8. 关于用css实现文本和图片垂直水平居中

    关于用css实现文本和图片垂直水平居中   一直相信好记性不如烂笔头,最近遇到很多用到垂直居中的,整理一下以便日后查阅. 一.文本垂直水平居中 1.水平居中: 文字水平居中没什么好说的,用text-a ...

  9. css实现垂直水平居中的方法(个数不限)?

    方法一:使用绝对定位 大家都知道margin:0 auto;能够实现水平居中,但却不知道margin:0 auto;也是可以实现垂直居中的: 给居中元素添加如下样式: .Absolute-Center ...

随机推荐

  1. HDOJ/HDU 2560 Buildings(嗯~水题)

    Problem Description We divide the HZNU Campus into N*M grids. As you can see from the picture below, ...

  2. NDK的安装和下载

    从官网下载NDK 下载页面:https://developer.android.com/ndk/downloads/index.html 从镜像站点下载NDK "大师兄"是一个由腾 ...

  3. hdu 4405概率dp

    #include <cstdio> #include <cstring> #include <iostream> #include <cmath> #i ...

  4. oracle REPLACE 函数 介绍

    oracle REPLACE 函数是用另外一个值来替代串中的某个值. 例如,可以用一个匹配数字来替代字母的每一次出现.REPLACE 的格式如下所示: REPLACE ( char, search_s ...

  5. 某返利网站admin目录index.php文件混淆加密算法分析

    ---恢复内容开始--- 文件已经加密,可以在此下载:index.php 文件内容打开大概如此: 简单字符替换之后,发现字符串用base64_decode仍无法解码. 找到一个解码网站:找源码 解码后 ...

  6. (一)Windows下搭建PHP开发环境及相关注意事项

    PHP集成开发环境有很多,如XAMPP.AppServ......只要一键安装就把PHP环境给搭建好了.但这种安装方式不够灵活,软件的自由组合不方便,同时也不利于学习.所以我还是喜欢手工搭建PHP开发 ...

  7. android tips—启动Emergency call拨号盘

    Intent intent = new Intent(); intent.setAction("com.android.phone.EmergencyDialer.DIAL"); ...

  8. PHP拦截器的使用(转)

    PHP有如下几个拦截器: 1.__get($property)功能:访问未定义的属性是被调用2.__set($property, $value)功能:给未定义的属性设置值时被调用3.__isset($ ...

  9. android 40 Io编程

    Io编程:内存卡和sd卡.字符串存入内存卡然后读出来. activity: package com.sxt.day06_06; import java.io.FileInputStream; impo ...

  10. linux内核学习-建议路线

    三大经典书: LDD: Linux Device Driver 容易上手 LKD: Linux Kernel Development 通俗易懂 UDK: Understand Linux Kernel ...