CSS position实现DIV浏览器垂直居中布局

例子

 代码如下 复制代码

position:absolute;width:200px;height:200px;left:50%;top:50%;margin-left:-100px;margin-top:-100px

POSITION用绝对定位是脱离文档流，，针对浏览器，

DIV左上角顶点距浏览器左边整个浏览器宽度的一半即50%

DIV左上角顶点距浏览器顶部整个浏览器高度的一半即50%

现在DIV左上角顶点在浏览器的中心位置，然后设置margin-left 往左边浏览器DIV的一半，再设置margin-top往顶部边浏览器DIV的一半，

这样DIV就垂直居中了

为什么DIV的POSITION不用相对定位呢，，

position:relative;width:200px;height:200px;left:0%;top:0%;  这个时候是他在正常流中的位置

BODY没有高度有margin，top:50% 不起作用

left:50%  可以起作用，，但是它是相当于BODY中的一半 ，得设置body{marign:0px;} 才等于整个浏览器宽度的一半。

文字在DIV中竖直居中

(DIV的高度-文字的高度)/2 为padding-top值

然后div高度修改为原DIV的高度-padding-top值

下面看一些例子

1、单行垂直居中

　　文字在层中垂直居中vertical-align 属性是做不到的.我们这里有个比较巧妙的方法就是:设置height的高度与line-height的高度相同!

 代码如下 复制代码
 <div style="line-height:500px;height:500;">

2、层水平居中

　　设置div的宽度小于父div的宽度，设置 margin:0 auto;，即可让div居中。

 代码如下 复制代码
 #parentdiv
 {
 width: 500px;
 }
 #childdiv {
 width: 200px;
 margin:0 auto;
 }

3、层中的文字水平居中

　　在childdiv的css加上text-align:center;
 

 代码如下 复制代码
#parentdiv
 {
 width: 500px;
 }
 #childdiv {
 width: 200px;
 margin:0 auto;
 text-align:center;
 }

4、div层垂直居中
 

 代码如下 复制代码
<div style="width:275px;height:375px;border: solid red;">
 <div style=" background:green;height: 375px; width: 275px; position: relative; display: table-cell; vertical-align: middle;">
      <div
  style=" background:red;position:static;position:absolute9; top: 50%;">
         <div
   style=" background:blue;position: relative; top: -50%;">
   居中居中
</div>
       </div>
    </div>
 </div>

5、div层垂直水平居中，英文超长换行
 

 代码如下 复制代码
<div style="float:left;width:275px;height:375px;border: solid red;">
<div
style=" height: 375px; width: 275px; position: relative; display: table-cell; vertical-align: middle;">
<div
 style="position:static;position:absolute9; top: 50%;">
 <div style="position: relative; top: -50%; text-align: center;">
    <div style="width: 85px;WORD-WRAP: break-word;TABLE-LAYOUT: fixed;word-break:break-all;margin:0 auto;">
  w居中居中居中居中居中居中居中居中居中居中居中居中居中居中
    </div>
    </div>
</div>
         </div>
</div>

6、div垂直滚动
 

 代码如下 复制代码
<div
    style="width: 160px; height: 260px; overflow-y: scroll; border: 1px solid;">

    居中居中
   </div>
7、垂直居中和使用text-align水平居中

 代码如下 复制代码
<div style="float:left;width:275px;height:375px;border: solid red;">
<div
style=" height: 375px; width: 275px; position: relative; display: table-cell; vertical-align: middle;">
<div
 style="position:static;position:absolute9;top: 50%;">
 <div
  style="position: relative; top: -50%; text-align:center;">
  <div style="width: 275px;">
  <div style="width: 160px;WORD-WRAP: break-word;TABLE-LAYOUT: fixed;word-break:break-all;text-align:left;">
  w居中居中w居中居中w居中居中w居中居中w居中居中w居中居中
    </div>
    </div>
 
    </div>
</div>

         </div>
</div>
8、垂直居中和使用margin水平居中

 代码如下 复制代码
  <div style="float:left;width:275px;height:375px;border: solid red;">
<div
style=" height: 375px; width: 275px; position: relative; display: table-cell; vertical-align: middle;">
<div
 style="position:static;position:absolute9; top: 50%;">
 <div
  style="position: relative; top: -50%; ">
 
  <div style="margin:0 auto;width: 160px;WORD-WRAP: break-word;TABLE-LAYOUT: fixed;word-break:break-all;">
  w居中居中w居中居中w居中居中w居中居中w居中居中w居中居中w居中居中w居中居中
    </div>
    </div>
</div>
         </div>
</div>
时间： 2024-11-28 16:31:30

CSS position实现DIV浏览器垂直居中布局的相关文章

css实现在div水平垂直居中与图片水平居中的效果

div居中的完美解决方案! (水平垂直居中) 1,关于居中使用css为:  代码如下 复制代码 position:fixed;left:50%;top:50%;margin-left:width/2;margin-top:height/2; 对于ie6,只能把position:改成absolute; 图片在div中居中 利用图片的margin属性将图片水平居中,利用div的padding属性将图片垂直居中. 方法一: css代码如下:  代码如下 复制代码 div {width:300px; h

css中div百分比垂直居中几种方法

前言 我们都知道,固定高宽的div在网页中垂直居中很简单,相信大家也很容易的写出来,但是不是固定高宽的div如何垂直居中呢?我们在网页布局,特别是手机等web端网页经常是不固定高宽的div,那么这些div如何垂直居中呢?这篇文章,我总结一下. 固定高宽div垂直居中 如上图,固定高宽的很简单,写法如下:  代码如下 复制代码  position: absolute;  left: 50%;  top: 50%; width:200px; height:100px; margin-left:-10

三款css div 图片垂直居中代码

本文章收集了三款css教程 div 图片垂直居中代码哦,他可以对div进行垂直居中同时也可以对图片垂直居中哦,好了下面我们来看看这款垂直居中实例代码吧. cssbox{  /* 非ie内核浏览器识别垂直居中 */  display:table-cell;  vertical-align:middle;  /* ie内核浏览器识别垂直居中 */  *display:block;  /* 约为高度的0.873,200*0.873 约为175 */  *font-size:175px;  text-a

css+div三栏布局 左右固定宽 中间自适应

三栏布局,这是一种相对比较常见的页面布局,这里提供2种实现方法: 方法1: 使用最新的css3伸缩盒布局属性,可轻松实现(三栏等高,默认就是三栏等高哟!)  代码如下 复制代码 <style>     .header,.footer{height: 100px;line-height: 40px;font-weight: bold;background-color:     #bbb;text-align: center;} .main{} .content{overflow: hidden;

CSS{position:fixed}让HTML固定在浏览器的某个位置

文章简介:跨浏览器的CSS固定定位{position:fixed}. 不知道您是否留意了,浏览本站时,浏览器右下角有一个标着top的黑色直角三角形,可以点击它返回到正在浏览的网页页眉.当滚动网页时,它的位置一直没有任何改变,您感觉它怎么样?这就是通过CSS的定位属性{position:fixed}来实现的,通过它可以让HTML元素脱离文档流固定在浏览器的某个位置. IE7.Firefox.Opera,都支持CSS的{position:fixed},所以很容易实现(<详解定位与定位应用>) IE

css div水平垂直居中几个例子

一.未知宽度水平居中  代码如下 复制代码 <!doctype html> <html> <head> <meta charset="utf-8"> <title>未知宽高div在页面内水平垂直居中</title> <style> *{margin:0; padding:0;} body,html{overflow:hidden; height:100%;} .box {height: 100%; ov

【DIV+CSS入门教程】使用Table布局是不明智的

使用Table布局页面为什么是不明智的? 大家看到标题,不要误解认为在页面中不能使用Table,而是可以使用Table,但是尽量不要用Table去布局页面,为什么这么说呢,因为使用Table布局页面会使页面失去灵活性,怎么个灵活法呢,比如今天你好不容易做出来的页面,第二天老板说我不喜欢登录模块放到右边,还是放到左边,通知板块放到右侧去,页面风格最好一个月换一种,如果遇到这种老板,提出这种要求,并且你的页面是用Table布局的,那么你会崩溃的,工作量那是大大滴~,如果不相信的话,你们自己可以找个页

CSS网页制作实例:三列等高DIV的网页布局

文章简介:用纯CSS实现三列DIV等高布局的方法. 散列等高 <body><div id="wrap"><div id="left"><p style="height:500px">style="height:500px"</p></div><div id="center"><p style="height:

jquery实现div水平垂直居中例子

jquery统计出来  代码如下 复制代码 if($("#cont1").css("position")!="fixed"){ $("#cont1").css("position","absolute"); var dw = $(window).width(); var ow = $("#cont1").outerWidth(); var dh = $(window)