有时候我们需要实现下面这种效果:

嘎嘎,撑大高度不让你剧中

嘎嘎,撑大高度不让你剧中

嘎嘎,撑大高度不让你剧中

嘎嘎,撑大高度不让你剧中

嘎嘎,撑大高度不让你剧中

嘎嘎,撑大高度不让你剧中

嘎嘎,撑大高度不让你剧中
我要居中

直接上代码:

html:

  <div class="main">
<div class="left">
嘎嘎,撑大高度不让你剧中
<br/> 嘎嘎,撑大高度不让你剧中
<br/> 嘎嘎,撑大高度不让你剧中
<br/> 嘎嘎,撑大高度不让你剧中
<br/> 嘎嘎,撑大高度不让你剧中
<br/> 嘎嘎,撑大高度不让你剧中
<br/> 嘎嘎,撑大高度不让你剧中
<br/>
</div>
<div class="right">
<span>我要居中</span>
</div>
</div>

css:

* {
padding: 0;
margin: 0;
}
.main {
width: 100%;
display: table;
}
.left {
text-align: center;
vertical-align: middle;
display: table-cell;
width: 50%;
box-sizing: border-box;
border: 1px solid #ddd;
}
.right {
display: table-cell;
vertical-align: middle;
text-align: center;
width: 50%;
box-sizing: border-box;
border: 1px solid #ddd; //针对ie6的hack
_position: absolute;
_top: 50%;
}
.right span {
//针对ie6的hack
_position: relative;
_top: -50%;
}

由 ie6 hack 想到的 内容不确定高度宽度的居中:

内容居中,内容居中,内容居中,内容居中,内容居中,内容居中,内容居中,内容居中,内容居中,内容居中,内容居中,内容居中,内容居中,内容居中,内容居中, 内容居中,内容居中,内容居中,内容居中

html:

<div class="center-main">
<div class="center-content">
<span>内容居中,内容居中,内容居中,内容居中,内容居中,内容居中,内容居中,内容居中,内容居中,内容居中,内容居中,内容居中,内容居中,内容居中,内容居中, 内容居中,内容居中,内容居中,内容居中</span>
</div>
</div>

css:

* {
padding: 0;
margin: 0;
}
html, body {
width: 100%;
height: 100%;
}
.center-main {
width: 100%;
height: 100%;
position: absolute;
}
.center-content {
position: relative;
text-align: center;
top: 50%;
}
.content span {
top: -50%;
}

CSS实现不固定宽度和高度的自动居中的更多相关文章

  1. 纯CSS实现侧边栏/分栏高度自动相等

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=694 一.为何要分栏高 ...

  2. 右边根据左边的高度自动居中只需要两行CSS就可以完成

    右边根据左边的高度自动居中只需要两行CSS就可以完成 <style type="text/css" > div{ display: inline-block; vert ...

  3. CSS,让100%的宽度,自动减10,让100%的高度,自动减10,可以加减乘除

    CSS,让100%的宽度,自动减10,让100%的高度,自动减10,可以加减乘除 实例: .add{ width: calc(100% - 10px); height: calc(100% - 10p ...

  4. DIV+CSS左右两列自适应高度的方法

    我们在用DIV+CSS布局网页的时候,必然会遇到左右两列自适应高度的问题,就是左边列的背景会随着右边列内容的增加也相应的增加高度,下面就教大家DIV+CSS左右两列自适应高度的方法. 下面给出最终的效 ...

  5. 盒子模型、网页自动居中、float浮动与清除、横向两列布局

    1.CSS包含:标准文档流,浮动,绝对定位 标准文档流的特点:从上到下,从左到右,输出文档内容 盒子模型:块级元素(div ui li dl dt p)与行级元素(span strong img in ...

  6. div中宽高度自适应文字换行居中问题解决

    <html> <head> <meta charset="UTF-8"/> <title>div中宽高度自适应文字换行居中demo& ...

  7. gVim 启动时窗口自动居中

    最近折腾 vim, 除了配置巨麻烦外, 另一个很蛋疼的就是窗口位置问题了, 折腾了半天无法启动时自动居中, 找遍各地也只有保存上次位置, 下次启动时恢复的方法 废话不多说, 直接上代码, 丢到 vim ...

  8. 纯CSS兑现侧边栏/分栏高度自动相等(转)

    这里直接介绍我认为的最佳的侧边栏/分栏高度自动相等方法.核心的CSS代码如下(数值不固定): margin-bottom:-3000px; padding-bottom:3000px; 再配合父标签的 ...

  9. css如何实现一个元素高度固定宽度按比例显示?

    用padding-top百分比可以实现宽度固定高度按比例展示,现在的需求是对一个video视频的盒子div高度是固定的,宽度如何按比例展示? 解决后效果如图: 红框标注的即是我在上面高度比例固定的范围 ...

随机推荐

  1. Python学习 之 编程

    1.搭建python环境 交互模式:输入python进入交互模式,exit()退出交互模式 文本模式:新建*.py文件,编辑*.py文件,运行python *.py 2.python文件类型 (1)源 ...

  2. 高级I/O之STREAMS

    http://en.wikipedia.org/wiki/STREAMS STREAMS(流)是系统V提供的构造内核设备驱动程序和网络协议包的一种通用方法,对STREAMS进行讨论的目的是为了理解系统 ...

  3. 已知json类型根据类型封装集合

    1编写帮助类根绝url得到json public static string Post(string url) { string strURL = url; //创建一个HTTP请求 HttpWebR ...

  4. spring源码分析之spring-jms模块详解

    0 概述 spring提供了一个jms集成框架,这个框架如spring 集成jdbc api一样,简化了jms api的使用. jms可以简单的分成两个功能区,消息的生产和消息的消费.JmsTempl ...

  5. 有符号的范围,-128~+127详解(zt)

    这是一个困惑了我几年的问题,它让我对现在的教科书和老师极其不满,从我N年前开始摸电脑时,就几乎在每一本C++教科书上都说,8位有符号的取值范围是-128~+127,为什么不是-127~+127呢,后来 ...

  6. Ping pong

    Ping pong Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total S ...

  7. javascript的变量、作用域和内存问题

    基本类型和引用类型的值执行环境垃圾收集 ECMAScript 变量可能包含两种不同数据类型的值:基本类型值和引用类型值.基本类型值指的是简单的数据段引用类型值指那些可能由多个值构成的对象 基本数据类型 ...

  8. Gnome下Gvim菜单无法显示的解决办法

    前些日子从Xfce转向了Elementary OS,安装Gvim后发现菜单无法显示,现在找到了解决的办法. 编辑文件  -/.gnome2/vim [Placement] Dock=Toolbar\\ ...

  9. Slickflow.NET 开源工作流引擎基础介绍(四) -- 多数据库支持实现

    前言:引擎作为中间件集成到用户的项目里面去,针对用户的数据库类型,需要作出SQL部分的分别实现.引擎默认数据库为MS SQLSERVER,同时也支持ORACLE, MYSQL, KINGBASE等不同 ...

  10. Linux命令(4):cat命令

    1.作用:连接并显示指定的一个和多个文件的有关信息: 2.格式:cat [选项] 文件1 文件2 ... 其中文件1.文件2为要显示的多个文件: 3.常见参数: 4.使用实例: [youname@ww ...