1.margin:auto ;让元素居中,需要确定元素的宽度,并且需要是块元素

eg: div {

  width:200px;

  height:200px;

  background:#222;

  margin:0 auto;

}

2. div > p 两者都是块元素

div {

  width:200px;

  height:200px;

  background:#eee;

  margin:auto;

}

div>p {

  width:60%;

  margin:auto;

  font-size:14px/1.5 Arial,sans-serif;

}

3.

.container {
height: 300px;
width: 300px;
background: #eee;
margin: 10px auto;
position: relative;
} .box {
height: 100px;
width: 100px;
background: #222;
position: absolute;
left: 100px; 100 = (300 - 100)/2
}

4.
.container {
height: 300px;
width: 300px;
background: #eee;
margin: 10px auto;
position: relative;
} .box {
height: 100px;
width: 100px;
background: #222;
position: absolute;
}

5.
.container {
height: 300px;
width: 70%;
background: #eee;
margin: 10px auto;
position: relative;
} .box {
height: 100px;
width: 100px;
background: #222;
position: absolute; /*Centering Method 2*/
margin: 0px 0 0 -50px;
left: 50%;
}

6.
.container {
height: 300px;
width: 70%;
background: #eee;
margin: 10px auto;
position: relative;
} .box {
height: 100px;
width: 70%;
background: #222;
position: absolute; /*Centering Method 2*/
margin: 0px 0 0 -35%; /* Half of 70% /*
left: 50%;
}

7.
.container {
height: 300px;
width: 300px;
background: #eee;
position: absolute; margin: -150px 0 0 -150px;
left: 50%;
top: 50%;
} .box {
height: 100px;
width: 100px;
background: #222;
position: absolute; /*Centering Method 2*/
margin: -50px 0 0 -50px;
left: 50%;
top: 50%;
}

8.

9.
.container {
height: 400px;
width: 400px;
background: #eee;
margin: 50px auto;
} h1 {
font: 40px/1 Helvetica, sans-serif;
text-align: center;
}

10.
.container {
height: 200px; /*Set line-height to this value*/
width: 400px;
background: #eee;
margin: 150px auto;
}
h1 {
font: 40px/200px Helvetica, sans-serif;
text-align: center;
}


11.

.container {

  height: 300px;
width: 300px;
margin: 150px auto;
background: #eee url(http://lorempixum.com/100/100/nature/4) no-repeat;
background-position: top center; }

 

 

12.

.container {
height: 300px;
width: 300px;
margin: 150px auto;
background: #eee url(http://lorempixum.com/100/100/nature/4) no-repeat center;
}

1. 重要: 先对元素 设置高度
2. 运用以下规则

    position: absolute;
margin: auto;
top: 0; left: 0; right: 0; bottom: 0;
overflow: auto;

考虑多浏览器兼容性的话 display: table or display: inline-block;

3.宽度高度不固定DIV水平居中

html部分

     <div class="container">
<div class="center"><a href="#">1</a><a href="#">2</a><a href="#">3</a>
<div style="clear:both"></div></div>

css部分

     .container{width:500px;height:80px;background:#C2300B;margin-left:50px;padding-top:10px;text-align:center;}
.center{display:inline-block;border:2px solid #fff;}
.center{_display:inline;} /*针对ie6 hack*/
.center a{float:left;border:1px solid #fff;padding:5px 10px;margin:10px;color:#fff;text-decoration:none;}

代码要点:

  • 父容器container加css属性 text-align:center;
  • 子容器center加css属性display:inline-block;
  • .center{_display:inline;} 为针对ie6的hack

3.宽度高度不固定DIV垂直居中

html部分

     <div id="vc"><div id="vci"><div id="content">
我们垂直居中了,我们水平居中了
</div></div></div>

css部分

     #vc { display:table; background-color:#C2300B; width:500px; height:200px; overflow:hidden; margin-left:50px; _position:relative; }
#vci { vertical-align:middle; display:table-cell; text-align:center; _position:absolute; _top:50%; _left:50%; }
#content { color:#fff; border:1px solid #fff; display:inline-block; _position:relative; _top:-50%; _left:-50%; }

代码要点:

  • 父容器vc的css属性 display:table;overflow:hidden;
  • 子容器vci的css属性 vertical-align:middle;display:table-cell;
  • 针对ie6的hack,vci容器的 _position:absolute;_top:50%; 和content容器的 _position:relative; _top:-50%;
  • 如果不需要水平居中的话,需要注释掉vci容器的text-align:center;_left:50%;以及content的display:inline-block;_left:-50%;

4.宽度高度固定水平垂直居中

html部分

     <div class="guding"><div class="gd">居中了</div></div>

css部分

    .guding{width:500px;height:200px;background:#c2300b;margin-left:50px;position:relative;}
.gd{width:50px;height:20px;background:#fff;position:absolute;top:50%;left:50%;margin-top:-10px;margin-left:-25px;}

代码要点:

  • 父容器要用相对定位position:relative;否则的话子元素会相对于浏览器窗口进行绝对定位。
  • 子容器绝对定位,top:50%;left:50%;margin-top,margin-left的值取该容器高度,宽度的一半的负值。

5. 然后CSS3来了,使用flexbox布局

抛开兼容性,我想这是一个完美的居中,不需要考虑宽度和高度值。

<div id="parent">
<div id="item">test</div>
</div>
#parent {
display: flex;
width: 400px; /* 宽度值,随便啦 */
height: 400px; /* 高度值,随便啦 */
background-color: yellow;
} #item {
width: 100px;/* 宽度值,随便啦 */
height: 20px;/* 高度值,随便啦 */
margin: auto;
background-color: red; /* Magic! */
}
												

div 居中进行总结的更多相关文章

  1. bootstrap之div居中

    bootstrap之div居中 偏移列 偏移是一个用于更专业的布局的有用功能.它们可用来给列腾出更多的空间.例如,.col-xs=* 类不支持偏移,但是它们可以简单地通过使用一个空的单元格来实现该效果 ...

  2. 移动页面div居中效果代码

    在线查看效果:http://hovertree.com/texiao/mobile/4.htm 可用手机浏览器查看 以下为HTML文件: <!DOCTYPE html> <html& ...

  3. 【转】div居中代码 DIV水平居中显示CSS代码

    原文地址:http://www.divcss5.com/rumen/r622.shtml 如何使用CSS让DIV居中显示,让div水平居中有哪些CSS样式呢? 需要的主要css代码有两个,一个为tex ...

  4. 【转】CSS中怎么让DIV居中

    来源:http://www.cnblogs.com/DebugLZQ/archive/2011/08/09/2132381.html     CSS 如何使DIV层水平居中 今天用CSS碰到个很棘手的 ...

  5. 关于div居中

    margin : 100px; margin-left: auto; margin-right: auto; 这样子设置css样式就可以实现一个div居中

  6. CSS实现div居中

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

  7. HTML4如何让一个DIV居中对齐?float输入日志标题

    float:left,right clear:both 如何让一个DIV居中对齐? 第一步:设置外层的DIV的text-align:center; 第二步:设置里层的DIV的margin:auto 以 ...

  8. CSS中怎么让DIV居中(转载)

    CSS 如何使DIV层水平居中 今天用CSS碰到个很棘手的问题,DIV本身没有定义自己居中的属性, 网上很多的方法都是介绍用上级的text-align: center然后嵌套一层DIV来解决问题. 可 ...

  9. CSS中怎么让DIV居中

    CSS 如何使DIV层水平居中 今天用CSS碰到个很棘手的问题,DIV本身没有定义自己居中的属性, 网上很多的方法都是介绍用上级的text-align: center然后嵌套一层DIV来解决问题. 可 ...

  10. DIV居中的经典方法

    1. 实现DIV水平居中 设置DIV的宽高,使用margin设置边距0 auto,CSS自动算出左右边距,使得DIV居中. 1 div{ 2 width: 100px; 3 height: 100px ...

随机推荐

  1. Altium Designer(Protel)网络连接方式Port和Net Label详解

    1.图纸结构      图纸包括两种结构关系: 一种是层次式图纸,该连接关系是纵向的,也就是某一层次的图纸只能和相邻的上级或下级有关系:另一种是扁平式图纸,该连接关系是横向的,任何两张图纸之间都可以建 ...

  2. C51的编程规范

    现在单片机的程序设计,C51已经得到广泛的推广和应用,算是单片机的主流设计程序,甚至可以说作为单片机开发人员必须要掌握的一门语言了.作为一门工具,最终的目的就是实现功能.在满足这个前提条件下,我们希望 ...

  3. C# 在腾讯的发展(作者是微软连续10年的MVP)

    本文首发我的微信公众号"dotnet跨平台", 内容得到大家热烈的欢迎,全文重新发布在博客,欢迎转载,请注明出处. .NET 主要的开发语言是 C# , .NET 平台泛指遵循EC ...

  4. 关于URL编码/javascript/js url 编码/url的三个js编码函数

    关于URL编码/javascript/js url 编码/url的三个js编码函数escape(),encodeURI(),encodeURIComponent() 本文为您讲述关于js(javasc ...

  5. 8.2.1.10 Nested-Loop Join Algorithms 嵌套循环 关联算法:

    8.2.1.10 Nested-Loop Join Algorithms 嵌套循环 关联算法: MySQL 执行关联在表之间使用一个嵌套循环算法或者变种 Nested-Loop Join Algori ...

  6. 黑马程序员_Java_collections and Arrays(工具类)

    collections collections工具类方法 1,static <T extends Comparable<? super T>> void sort(List&l ...

  7. HDOJ 1397 Goldbach's Conjecture(快速筛选素数法)

    Problem Description Goldbach's Conjecture: For any even number n greater than or equal to 4, there e ...

  8. final(最终、修饰符)

    /* final(最终.修饰符) final关键字的用法: 1. final关键字修饰一个基本类型的变量时,该变量不能重新赋值,第一次的值为最终的. 2. fianl关键字修饰一个引用类型变量时,该变 ...

  9. HybridApp开发准备工作——WebView

    如大家所见,手机真是越来越离不开我们的日常生活了,像我,现在出门必带的是手机.移动电源.公交卡:钱包什么的再也没出过门.两年前,我还在Android的应用开发中当了一次过客.嗯,当时JAVA学得太糟糕 ...

  10. [原创作品] web项目构建(一)

    今天开始,将推出web项目构建教程,与<javascript精髓整理篇>一并更新.敬请关注. 这篇作为这一系列开头,主要讲述web项目的构建技术大全.在众多人看来,web前端开发无非就是写 ...