<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo</title>
<style type="text/css">
#outer{
width:500px;
height:200px;
margin: 50px auto;
border:1px solid #CCC;
display:table;
text-align:center;
#position:relative;
}
#middle{
display:table-cell;
vertical-align:middle;
#position:absolute;
#top:50%;
#left:50%;
}
#inner{
#position:relative;
#top:-50%;
#left:-50%;
}
</style>
</head>
<body>
<div id="outer">
<div id="middle">
<img id="inner" src="http://static.cnblogs.com/images/logo_small.gif"/>
</div>
</div>
</body>
</html>
原理是标准浏览器下用table和table-cell布局，然后用vertical-align:middle居中元素，但IE67不支持table布局，所以用了用了css hake，就是带#开头的属性。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo</title>
<style type="text/css">
#outer{
width:500px;
height:200px;
margin: 50px auto;
border:1px solid #CCC;
position:relative;
}
#inner{
position:relative;
left:50%;
top:50%;
margin-left:-71px;
margin-top:-27px;
}
</style>
</head>
<body>
<div id="outer">
<img id="inner" src="http://static.cnblogs.com/images/logo_small.gif"/>
</div>
</body>
</html>
用负margin实现，但缺点是要知道居中内容的宽度和高度。
用CSS让未知高度内容垂直方向居中的更多相关文章
-
CSS实现未知高度图文混合垂直居中
(从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期 2014-06-26) CSS实现未知高度图文混合垂直居中,阅读CSS实现未知高度图文混合垂直居中. IE6,IE7,FF3测试通过 ...
-
CSS解决未知高度垂直居中
尽管有CSS的vertical-align特性,但是并不能有效解决未知高度的垂直居中问题(在一个DIV标签里有未知高度的文本或图片的情况下). 标准浏览器如Mozilla, Opera, Safari ...
-
css实现未知高度水平垂直居中
页面设计中,经常需要实现元素的水平垂直居中,css实现的方法有很多(列如: margin: auto.position定位.css表达式calc().使用css预处理.table等都可以实现水平居中) ...
-
css 元素水平垂直方向居中
html部分 <div class="parent"> <div class="child"> - -居中- - </div> ...
-
【笔记】css基于box的一行时垂直方向居中，多行平均居中，多出部分还省略号代替
题目很长,其实他就是这样的: 看标题,一行的时候是这样的,在行中间 标题文字多的时候是这样的,变成2行,超出部分用省略号: 但是为了更好的兼容性,没有使用flex,使用的是box布局. 核心代码就是这 ...
-
CSS之未知高度img垂直居中
测试代码如下:(能够水平居中,通过text-align:center实现) <style>.box{ width:800px;height:600px;border:2px solid # ...
-
js控制图片缩放、水平和垂直方向居中对齐
已測试兼容 IE6,IE7,IE8,火狐FF,谷歌chrome. 这里使用了jquery插件,假设你不使用jquery,略微改造一下也非常快. 网上查了些资料,用css控制兼容性不好,看去非常揪心.于 ...
-
html如何让label在div中的垂直方向居中显示？
设置label的行高 line-height 和div的高度一致即可.
-
HTML-移动端如何使用css让百分比布局的弹窗水平和垂直方向上居中
pc端让一个弹窗水平和垂直方向居中,在知道弹窗宽高的情况下很好计算,只需要用如下css即可: #date{ width: 300px; height: 300px; position: absolut ...
随机推荐
-
基于centOS6.7搭建LAMP（httpd-2.4.18+mysql-5.5.47+php-5.6.16）环境
首先确保系统可以联网.设置IP地址以及虚拟机安装linux在此略过.本文采用centos6.7 64位minimal版.php5.6.16.httpd-2.4.18.mysql-5.5.47版搭建la ...
-
Byte History
https://en.wikipedia.org/wiki/Byte The term byte was coined by Werner Buchholz in July 1956, during ...
-
关于deferred
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
-
php 获取文件后缀名
$file_ext = strtolower(substr(strrchr($upload_file, '.'), 1)); strrchr:查找指定字符在字符串中的最后一次出现 string str ...
-
openerp模块收藏 基于Lodop的报表打印模块（转载）
基于Lodop的报表打印模块 原文:http://shine-it.net/index.php/topic,7397.0.html 前段时间写了个小模块,来解决OE中报表打印不方便的问题.借鉴了 @b ...
-
如何为你的美术妹子做Unity的小工具（一）
在上的工具栏添加 也就是这个位置
-
hdu1020
#include <stdio.h> int main(void){ int n,i,c; char txt[10001]; scanf("%d", &n); ...
-
Apache Shiro Java反序列化漏洞分析
1. 前言 最近工作上刚好碰到了这个漏洞,当时的漏洞环境是: shiro-core 1.2.4 commons-beanutils 1.9.1 最终利用ysoserial的CommonsBeanuti ...
-
数据结构——串（KMP）
空串:长度为0的串 空格串:由一个或多个空格组成的串 串常用的3种机内表示方法: 定长顺序存储表示: 用一组地址连续的存储单元存储串的字符序列,每一个串变量都有一个固定长度的存储区,可用定长数组来描述 ...
-
Delta DVP 系列 PLC 各装置 Modbus 地址
此Modbus地址表以 1 为基础地址 Device Range Type DVP address (Hex) Modbus address (Dec) Effective ES/EX/SS SA/S ...