一直，我是认为定一个width，然后写一句margin:0 auto,就可以，但是有时也会不管用。

例如当我要定一个宽度为700的div，用相对定位定在中间。任你怎么拉伸都是居中。而position:absolute; left:50%; margin-left:-350px; 而这个350px则是这个元素宽度的一半。

　　 看实例子

     

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>无标题文档</title>

<script type="text/javascript" src="jquery-2.0.3.js"></script>

<style>

.scroll{height:2000px;}

.main{width:%;height:550px; background-color:#fe3a08; position:relative;}

.cent{width:700px;color:#fff; font-size:46px; font-family:"幼圆"; position:absolute; left:50%; margin-left:-350px;line-height:500px;top:0px;}

</style>

<script>

function changeTop(obj, value) {

    var offsetTop = obj.offset().top + value;

    var scrollTop = $(window).scrollTop();

    console.log(offsetTop);

    console.log(scrollTop);

    var result = scrollTop - offsetTop ;

    if ((offsetTop < scrollTop) ) {

        obj.find(".bg-image").stop(true,true).animate({ "top": result }, );

    }

    if (offsetTop + < scrollTop) {

        obj.find(".bg-image").stop(true,true).animate({ "top": "0px" }, );

    }

}

$(function(){

    $(window).scroll(function () {

        changeTop($(".main"),);

    })

})

</script>

</head>

<body>

<div class="scroll">

    <div class="main">

        <div class="cent bg-image">

                R6 BRANCH OFFICE | 工程管理

        </div>

    </div>

</div>

</body>

</html>

css中将div定位居中的更多相关文章

  1. 用CSS让DIV上下左右居中的方法

    转载自喜欢JS的无名小站 例如 一个父div(w:100%;h:400px)中有一个子div(w:100px;100px;).让其上下左右居中. 方法一(varticle-align) 理念 利用表格 ...

  2. HTML CSS 中DIV内容居中汇总

    转载博客(http://www.cnblogs.com/dearxinli/p/3865099.html) (备注:DIV居中情况,网上谈到也比较多,但是这篇文字,相对还是挺全面,现转载,如果冒犯,还 ...

  3. CSS样式div

    页面中,有很多样式标签:div标签,对标签定位的地方有: 1.<head>标签里加<style>标签,在<style>标签中添加样式.如: <style> ...

  4. HTML5：footer定位（底部+居中）的探讨+div图片居中问题

    初学HTML+CSS布局,尝试自己写一个百度首页,可是footer的定位遇到麻烦而且百度没有好的解决方法,在此记录下逐步的过程.记录之,备忘. 初学,解决方法难免出现不妥之处,也请看到这篇文章的前辈指 ...

  5. CSS实现div居中

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  6. css 如何使图片与文字在div中居中展示？

      1.情景展示 如何将图片与文字在div中一起居中展示? HTML片段 <div style="background: #fff;padding-top: 5px;border:1p ...

  7. 绝对定位的DIV绝对居中显示

    绝对居中:即在客户端上任何分辨率下纵横方向均居中 紫色的正方形为绝对定位的div position:absolute; top: 50%; left: 50%; 只能把div定位在以红色圈为起点的位置 ...

  8. CSS背景图片定位

    原文:CSS背景图片定位 在网页开发中我们经常需要对图片进行分割(如下图)来使用,而不是分别提供单独的图片来调用,常见的如页面背景,按钮图标等,这样做的好处就是减少请求次数,节省时间和带宽. 对背景图 ...

  9. CSS学习摘要-定位实例

    CSS学习摘要-定位实例 注:全文摘自MDN-CSS定位实例 列表消息盒子 我们研究的第一个例子是一个经典的选项卡消息框,你想用一块小区域包括大量信息时,一个非常常用的特征.这包括含有大信息量的应用, ...

随机推荐

  1. gdb基本使用方法

    gdb时linux下的一个非常好用的调试工具.下面给出它几个常用的方法 b 设置断点.c 继续执行. i 查看一些信息,比如断点,i b. bt 查看函数调用栈. n 执行下一条指令,但不会进入到调用 ...

  2. Using command-line Subversion to access project source files

    Help index About source code version control with Software Configuration Management (Subversion) Usi ...

  3. 黑马程序员--C#中属性和字段(变量)的区别

    ---------------------- ASP.Net+Android+IOS开发..Net培训.期待与您交流! ---------------------- 属性为类提供了一种很有用的封装数据 ...

  4. vector、string实现大数加法乘法

    理解 vector 是一个容器,是一个数据集,里边装了很多个元素.与数组最大的不同是 vector 可以动态增长. 用 vector 实现大数运算的关键是,以 string 的方式读入一个大数,然后将 ...

  5. cognos8.3 sample在DB2里的安装

    db2 create db c83 alias c83 using codeset UTF-8 territory CA 创建sample数据库 db2set db2codepage= db2 cha ...

  6. 欧拉工程第71题：Ordered fractions

    题目链接:https://projecteuler.net/problem=71 If n<d and HCF(n,d)=1, it is called a reduced proper fra ...

  7. lintcode：落单的数

    题目: 落单的数 给出2*n + 1 个的数字,除其中一个数字之外其他每个数字均出现两次,找到这个数字. 样例 给出 [1,2,2,1,3,4,3],返回 4 挑战 一次遍历,常数级的额外空间复杂度 ...

  8. lintcode : 空格替换

    题目: 空格替换 设计一种方法,将一个字符串中的所有空格替换成 %20 .你可以假设该字符串有足够的空间来加入新的字符,且你得到的是“真实的”字符长度. 样例 对于字符串"Mr John S ...

  9. iOS动画篇：UIView动画

    iOS的动画效果一直都很棒很,给人的感觉就是很炫酷很流畅,起到增强用户体验的作用.在APP开发中实现动画效果有很多种方式,对于简单的应用场景,我们可以使用UIKit提供的动画来实现. UIView动画 ...

  10. ios开发--高德地图SDK使用简介

    高德LBS开放平台将高德最专业的定位.地图.搜索.导航等能力,以API.SDK等形式向广大开发者免费开放.本章节我们来简单学习一下如何使用它的定位及地图SDK. 一.相关框架及环境配置 地图SDK 对 ...