高固定情况下的水平及垂直居中

原创 2007年09月29日 09:54:00

  哇,好久没有Blog一下了,最近实在是忙晕了头,当然不仅仅是工作的问题,还有其它的。

  今天终于是忙里偷闲,好不容易有点时间更新一下Blog了,却被蜘蛛网似的杂乱无章的引用,留言,评论给搞得不爽,准备等再有时间就把“引用”什么的功能去掉,太多垃圾引用了。

  发现好长一段时间或者说一直以来,很多同学都对居中这个话题十分感兴趣,当然这里既有水平居中也包括垂直居中。

  相信水平居中大家都已经了解并会使用了,无非就text-align:center这样,还有为了兼容不可或却的margin:auto。

  某样功能或效果的实现其实都是依据一定的原理基础上的,有的东西只要明白了它的原理,至于有多少种实现方法和各方法的写法优劣这都会因个人对原理的理解程度不一而有所不同。

  扯远了,还是回来聊所谓的垂直居中(要垂直居中的这个东东的高度是即定的)。

  如,要使得一个高150px,宽任意的东东在浏览器中垂直居中:

  [演示地址:http://www.doyoe.com/model/xhtmlcss/style/cenmid.htm

CSS部分:

html,body {
 margin:0;
 font:12px/180% "宋体";
 text-align:center;
 height:100%;
}
#main {
 margin:0 auto;
 width:300px;
 height:150px;
 background-color:#ddd;
 text-align:left;
 overflow:hidden;
 position:relative;
 top:50%;
 margin-top:-75px;
}
#main h3 {
 margin:0;
 font:bold 18px/150% "宋体";
}

XHTML部分:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="Author" content="飘零雾雨|edzmaster@gmail.com" />
<title>传说中的水平及垂直居中(高固定)</title>
</head>
<body>
<div id="main">
  <h3>传说中的水平及垂直居中</h3>
  <ul>
    <li>传说中的水平及垂直居中</li>
    <li>传说中的水平及垂直居中</li>
    <li>传说中的水平及垂直居中</li>
    <li>传说中的水平及垂直居中</li>
    <li>传说中的水平及垂直居中</li>
  </ul>
</div>
</body>
</html>

  如上面这个例子,就已经实现了高为150px的div垂直居中 。

  XHTML部分没有什么值得考究的,只需要看一下CSS部分就行了。首先我们知道要使得一个东东始终呆在浏览器的某个位置,这需要用到position,然后通过top,right,bottom,left来控制具体位置。

  要使得这个div垂直居中,OK,肯定会想到top:50%。这样其实div的顶部就已经是垂直居中了,但对于整个div来说还并没有垂直居中,所以它需要以顶部作为轴心向上移动若干像素,移动多少呢?废话,当然是这个div实际高度的一半:75px。这样就能保证轴心上下的高是一样的,也就是说整个div就实现垂直居中了。

  然而为什么要指定html,body{height:100%}呢?这和position:relative有什么联系呢?自己去想,呵呵。

 

不固定宽和高的div 水平和垂直都居中

在写css的时候经常遇到的一个问题,当div没有固定的宽度或者高度的时候,如何才能让div水平或者垂直居中显示。 如果div有固定宽度的话,用padding,margin都很容易实现。方法有很多种。...
  • u010174173
  • u010174173
  • 2015年07月29日 11:07
  • 3959

绝对定位的盒子如何实现水平垂直居中

如果没有绝对定位,只需要设置margin:0 auto就可以是盒子实现水平垂直居中。但是如果设置了绝对定位,margin:0 auto就没有效果了,那此时又该怎么实现呢? 先来看一个例子,实现如...
  • bwf_erg
  • bwf_erg
  • 2017年04月17日 11:43
  • 750

自适应宽度盒子水平垂直居中css

sorry!小主把截图截的偏了所以看着好像不居中,但是是居中的哦,还有截图上的floatbox有position:fixed样式,这里没有粘贴哦。。     拒绝理由就打死我发的是看见发货单上看...
  • zyz_3362
  • zyz_3362
  • 2016年11月09日 16:02
  • 467

未知宽高的img在容器里实现水平垂直居中

//方法一:通用方案,可兼容IE6/7 无标题文档 .box{ width:800px;height:600px;border:2px solid #000;...
  • GYZ_Code
  • GYZ_Code
  • 2017年07月06日 11:47
  • 164

未知高度的div在父元素中水平垂直居中的方法

居中方法暂时找到两种: 1、父元素: 在父元素中使用: display: flex; justify-content: center; align-items: center; 这些属性,即可...
  • u012881878
  • u012881878
  • 2017年04月07日 10:20
  • 1799

大小不固定,多行文字的垂直居中

单行文字 可能很多人都知道如何让单行文字垂直居中显示,就是使用line-height,将line-height值与外部标签盒子的高度值设置成一致就可以了。例如如下css代码:height:3em; l...
  • xm1037782843
  • xm1037782843
  • 2016年09月27日 19:53
  • 980

如何让DIV水平和垂直居中三种方法

方法1 CSS实现水平和垂直居中要让DIV水平和垂直居中,必需知道该DIV得宽度和高度,然后设置位置为绝对位置,距离页面窗口左边框和上边框的距离设置为50%,这个50%就是指页面窗口的宽度和高度的50...
  • summer7310
  • summer7310
  • 2015年09月27日 20:14
  • 2070

用css实现垂直水平居中的几种方法

1.用line-block和vertical-align来实现居中:这种方法适合于未知宽度高度的情况下。 Title #container{ ...
  • baidu_24024601
  • baidu_24024601
  • 2016年04月12日 11:01
  • 5989

css(css3)实现垂直水平居中的那些事

都说“金三银四求职季”,本人也选择了在这个时候成为这浩浩荡荡的求职大军中的一员,几次面试下来,发现面试官都爱问的一个问题就是:“说说垂直水平居中都有哪些实现方式吧?”       面试过程巴拉巴拉一...
  • u014516981
  • u014516981
  • 2017年03月03日 20:10
  • 831

盘点8种CSS实现垂直居中水平居中的绝对定位居中技术

我们经常用margin:0 auto来实现水平居中,而一直认为margin:auto不能实现垂直居中……实际上,实现垂直居中仅需要声明元素高度和下面的CSS: .Absolute-Center { ...
  • freshlover
  • freshlover
  • 2013年09月11日 21:06
  • 324300
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:高固定情况下的水平及垂直居中
举报原因:
原因补充:

(最多只允许输入30个字)