1.水平居中

.div{

    margin:0 auto; （或者 margin:auto;）

    width:500px;

    height:300px;

}

2.使用margin水平垂直居中

方式一：

.div {

    text-align: center;

    line-height: 200px;

    border: 2px pink solid;

    width: 300px;

    height: 200px;

    position: absolute;

    left: 50%;

    top: 50%;

    margin: -100px 0 0 -150px;

}

方式二：

<!DOCTYPE html>

<html>

    <head>

        <title>块级元素水平，垂直居中</title>

        <meta charset="utf-8">

        <style>

            .wrapper {

                height: 600px;

                border: 1px solid gray;

            }

            .box {

                width: 100px;

                height: 100px;

                background: gold;

                margin: 250px auto;

            }

        </style>

    </head>

    <body>

        <div class="wrapper">

            <div class="box"></div>

        </div>

    </body>

</html>

3.jquery实现DIV水平垂直居中

.div {

    text-align: center;

    line-height: 200px;

    border: 2px pink solid;

    width: 300px;

    height: 200px;

}
< script >

$(window).resize(function(){

    $(".div").css({

        position: "absolute",

        left: ($(window).width() - $(".div").outerWidth())/2,

        top: ($(window).height() - $(".div").outerHeight())/2 

    });

}); 

$(function(){

    $(window).resize();

});

< /script >

4.使用css3 tansform属性

<!DOCTYPE html>

<html>

    <head>

        <title>块级元素水平，垂直居中</title>

        <meta charset="utf-8">

        <style>

            .wrapper {

                height: 400px;

                width:600px;

                border: 2px solid pink;

                border-radius:10px;

            }

            .box {

                position:relative;

                height:200px;

                width:200px;

                top:50%;

                left:50%;

                transform: translate(-50%,-50%);

                background:#abcdef;

            }

        </style>

    </head>

    <body>

        <div class="wrapper">

            <div class="box">adfagagafajkfhla</div>

        </div>

    </body>

</html>

效果如下：

单独设置垂直居中可使用：

top:50%;

tansfrom:translateY(-50%);

单独使用水平居中可使用：

left:50%;

tramsform:translateX(-50%);

5.table-cell

注意：可能会破坏页面整体布局

<!DOCTYPE html>

<html>

    <head>

        <title>块级元素水平，垂直居中</title>

        <meta charset="utf-8">

        <style>

            .wrapper {

                height: 400px;

                width:600px;

                border: 2px solid pink;

                border-radius:10px;

                display:table;

            }

            .box {

                text-align:center;

                position:relative;

                display:table-cell;

                vertical-align:middle;

                background:#abcdef;

            }

        </style>

    </head>

    <body>

        <div class="wrapper">

            <div class="box">adfagagafajkfhla</div>

        </div>

    </body>

</html>

效果如下：

6.使用示例：DIV创建水平垂直居中遮罩层

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" / >

<title></title>

<style>

#overlay {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: #000;

    opacity: 0.5;

    filter: alpha(opacity = 50);

}

#win {

   position: absolute;

    top: 50%;

    left: 50%;

    width: 400px;

    height: 200px;

    background: #fff;

    margin: -102px 0 0 -202px;

    line-height: 200px;

    text-align: center;

    border: 4px solid #CCC;

}

</style>

</head>

<body>

    <div id="overlay" ></div >

    <div id="win" >

        Div层居中

    </div >

</body>

</html>

效果：

元素水平垂直居中（transform，margin，table-cell，jQuery）的更多相关文章

  1. 手写面试编程题- 数组去重 深拷贝 获取文本节点 设置奇数偶数背景色 JS中检测变量为string类型的方法 第6题闭包 将两个数组合并为一个数组 怎样添加、移除、移动、复制、创建和查找节点？ 继承 对一个数组实现随机排序 让元素水平 垂直居中的三种方式 通过jQuery的extend方法实现深拷贝

    第1题==>实现数组去重 通过 new Set(数组名) // var arr = [12, 12, 3, 4, 5, 4, 5, 6, 6]; // var newarr1 = new Set ...

  2. CSS元素水平垂直居中方法总结（主要对大漠以及张鑫旭博客所述方法进行了归纳）

    本文主要是对主流居中方法进行了归纳,有些地方甚至就是把别人的代码直接复制过来的,没有什么自己的东西,除了大漠以及张鑫旭的方法外,还有来自司徒正美.怿飞博客的几个方法 以下方法,由于测试环境的原因,IE ...

  3. CSS元素水平垂直居中的方法

    1.  元素水平居中 1.1  设置父元素的属性 text-align: center; 说明:此属性只针对父元素的子元素为内联元素时有效,比如:img,input,select,button等(行内 ...

  4. CSS布局：元素水平垂直居中

    CSS布局:元素水平垂直居中 本文将依次介绍在不同条件下实现水平垂直居中的多种方法 水平垂直居中是在写网页时经常会用到的需求,在上两篇博客中,分别介绍了水平居中和垂直居中的方法.本文的水平垂直居中就是 ...

  5. 【Web】CSS实现绝对定位元素水平垂直居中

    网页中常常需用让绝对定位元素水平垂直居中,下面介绍2种方法: 一 元素宽度未知 <!DOCTYPE html> <html lang="en"> <h ...

  6. CSS未知宽高元素水平垂直居中

    方法一 :table.cell-table 思路:显示设置父元素为:table,子元素为:cell-table,这样就可以使用vertical-align: center,实现水平居中优点:父元素(p ...

  7. 05. flex元素水平垂直居中（三种position水平垂直居中和两种新老版本水平垂直居中）

    flex元素水平垂直居中(三种position水平垂直居中和两种新老版本水平垂直居中) (1).position : <!DOCTYPE html> <html lang=" ...

  8. css 实现元素水平垂直居中总结5中方法

    个人总结,如有错误请指出,有好的建议请留言.o(^▽^)o 一.margin:0 auto:text-align:center:line-height方法 <div id="divAu ...

  9. css元素水平垂直居中

    温习一下元素水平垂直居中的几种方法 元素有具体宽度 1.absolute+负边距 .LV_center{ border: 1px solid red; position: absolute; widt ...

  10. css进阶 04-如何让一个元素水平垂直居中？

    04-如何让一个元素水平垂直居中? #前言 老板的手机收到一个红包,为什么红包没居中? 如何让一个子元素在父容器里水平垂直居中?这个问题必考,在实战开发中,也应用得非常多. 你也许能顺手写出好几种实现 ...

随机推荐

  1. hdu 1882 Strange Billboard(位运算+枚举)

    http://acm.hdu.edu.cn/showproblem.php?pid=1882 感觉非常不错的一道题. 给一个n*m(1<=n,m<=16)的矩阵,每一个格子都有黑白两面,当 ...

  2. vs2008试用期到期解决办法

    vs2008试用期结束之后,     在“控制面板”中启动“添加删除程序”,      选中Vs2008,点击“更改.删除”,      在出现的维护模式对话框中, 选择下一步,输入下面的CD-Key ...

  3. Eclipse中输入系统变量和运行参数--转

    原文地址:http://chenzhou123520.iteye.com/blog/1931670 在开发时,有时候可能需要根据不同的环境设置不同的系统参数,我们都知道,在使用java -jar命令时 ...

  4. C++初始化顺序

    1. 全局和类的静态变量成员在main之前构造和初始化,静态成员不能在类的内部构造初始化 2. 类的普通成员依据在类内的定义顺序初始化,类的构造函数的初始化类表只能决定成员的构造函数,不能决定构造顺序 ...

  5. 关于Daydream VR的最直白的介绍

    虚拟现实(Virtual Reality),简称虚拟技术,也称虚拟环境,是利用电脑模拟产生一个三度空间的虚拟世界,提供用户关于视觉等感官的模拟,让用户如同身历其境一般,电脑可以立即进行复杂的运算,将精 ...

  6. discuz, 使用同一数据库, 只是换个环境, 数据就不一样了

    如题, 本以为是由于某些冲突导致, 细查之后, 发现是开了缓存了, 把缓存关掉或是在后台清理缓存就OK了 后台清理缓存, 全局--性能优化--内存优化  清理缓存 关闭缓存, 修改全局配置文件, co ...

  7. Linux SSH: key, agent, keychain

    以前遇到过一个问题,在用有些 Linux 发行版时,用 ssh-keygen 产生好了密钥对并上传到了目标服务器,但每次登录都要重新输入. 这与 ssh-agent 有关,看如下 man ssh-ag ...

  8. oracle事务特性详解

    原子性 事务是一个完整的操作.事务的各步操作是不可分的(原子的):要么都执行,要么都不执行. -- 创建表 create table account_money ( id number(4) not ...

  9. hibernate_validator_03

    约束继承 如果要验证的对象继承于某个父类或者实现了某个接口,那么定义在父类或者接口中的约束会在验证这个对象的时候被自动加载,如同这些约束定义在这个对象所在的类中一样. 让我们来看看下面的示例: pac ...

  10. 重拾C++ 基础知识总结（二）

    1.标准库string类型: 用户程序要使用string类型对象,必须包含相关头文件 #include <string> 字符串字面值与标准库string类型不是同一种类型,字符串字面值是 ...