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

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

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

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

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

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

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

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

直接上代码:

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. 称球问题(zt)

    下面说的这个问题可能大家都看到过,它是这么描述的: 现在有n(n>=2)个球,n个球外观一模一样,但是重量有区别,其中有且仅有一个球的重量比其它n-1个球要重,现在有一个天平,天平是完好无损的, ...

  2. python邮件发送接收

    接收邮件 import poplib,pdb,email,re,time from email import header POP_ADDR = r'pop.126.com' USER = '' PA ...

  3. javaScript入门--引用类型

    前面提到过,引用类型的值便是对象,在ECMAScript中,引用类型是一种数据结构,用于将数据和功能组织在一起,而对象则是某个特定引用类型的实例. var a=new Object(); 上面便声明了 ...

  4. FTP服务详解

    FTP服务 本章机构 简介 File Transfer Protocol(文件传输协议)的英文简称,而中文简称为"文件传输协议".用于Internet上的控制文件的双向传输.同时, ...

  5. 解析$.grep()源码及透过$.grep()看(两次取反)!!的作用

    先上jquery源码: grep: function( elems, callback, inv ) { var retVal, ret = [], i = 0, length = elems.len ...

  6. [BigData]关于Hadoop学习笔记第三天(PPT总结)(一)

     课程安排 MapReduce原理*** MapReduce执行过程** 数据类型与格式*** Writable接口与序列化机制*** ---------------------------加深拓展- ...

  7. ubuntu共享文件夹给virtualbox

    在ubuntu或者linuxmint等linux系统下安装了virtualbox,可以通过共享文件夹的方式,把文件夹共享给virtualbox下的虚拟机系统,我这里的虚拟机系统是win7,共享过程如下 ...

  8. Ajax发送FormData对象封装的表单数据

    前端页面: <!doctype html> <html lang="en"> <head> <meta charset="UTF ...

  9. 整合Spring与Hibernate

    在学习spring的时候,要整合hibernate,本来是看起来挺简单的,但是遇到的远要比想到了多,而且多很多,期间几天一个bug实在难调,几度放弃,但终究柳暗花明,抑制不住喜悦就想着分享一下成果吧. ...

  10. 把mvc4彻底搞定(一)

    1 .net web开发方式 webform开发 asp.net mvc开发 2 请求模式 webform方式:客户端向服务端请求一个aspx页面,服务端生成一个页面对象类,调用这个页面对象类的PR方 ...