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. 工作于内存和文件之间的页缓存, Page Cache, the Affair Between Memory and Files

    原文作者:Gustavo Duarte 原文地址:http://duartes.org/gustavo/blog/post/what-your-computer-does-while-you-wait ...

  2. HTML5之部分显示

  3. Java中的浅复制和深复制 Cloneable clone

    先看一个简单案例 public class Test {     public static void main(String args[]) {         Student stu1 = new ...

  4. Android手机适配——UI图片适配

    转载请注明出处:http://blog.csdn.net/guolin_blog/article/details/50727753 在Android项目当中,drawable文件夹都是用来放置图片资源 ...

  5. 将sql数据库逆向生成PDM模型

    由于接手的一个项目是公司前期外包出去的,所以到手的只有繁杂的代码,和数据库文件.由于是个新手,我需要一个数据字典来帮助我完成一些东西,所以我就想到从sql数据库转换出一个pdm模型的数据字典. 第一步 ...

  6. Activity中setResult(int resultCode, Intent data)与onActivityResult(int requestCode, int resultCode, Intent data)方法的调用

    关于Activity的生命周期 onCreate(Bundle savedInstanceState):可以进行一些初始化的工作在activity第一次被创建的时候调用.这里是你做所有初始化设置的地方 ...

  7. LINQ:使用Take和Skip实现分页

    随便找的,还没有试过代码. class Program { static int Main() { //每页大小 ; //页码 ; //源数据 string[] names = { "贤静& ...

  8. Linux下安装Android的adb驱动-解决不能识别的问题

    Linux下安装Android的adb驱动-解决不能识别的问题 20141011更新:      老方法对我当时使用的一款设备一直都没有出现问题,最后遇到小米手机还有Android4.4版本的系统都会 ...

  9. 【转】iOS开发系列--数据存取

    原文: http://www.cnblogs.com/kenshincui/p/4077833.html#SQLite 概览 在iOS开发中数据存储的方式可以归纳为两类:一类是存储为文件,另一类是存储 ...

  10. 写一个基于NSURLSession的网络下载库

    前段时间AFNetworking 更新到3.0 ,彻底废弃NSURLConnection的API转由NSURLSession来实现,代码并没有改动很大,AF封装的很好了,读完源码感觉收获很大. 下载不 ...