CSS布局居中
1、把margin设置为auto，此方法只能进行水平的居中，且对浮动元素或绝对定位元素无效。
代码：
<style type="text/css">
body{
margin: 0;
padding: 0;
}
#div1{
background-color: red;
width: 150px;
height: 150px;
}
#div2{
background-color: black;
width: 70px;
height: 70px;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<div id="div1" class="classname">
<div id="div2" class="classname">
</div>
</div>
</body>
2、效果图同上
这个没什么好说的，只能对图片，按钮，文字等行内元素(display为inline或inline-block等)进行水平居中。但要说明的是在IE6、7这两个奇葩的浏览器中，它是能对任何元素进行水平居中的。
代码：
<style type="text/css">
body{
margin: 0;
padding: 0;
}
#div1{
background-color: red;
width: 150px;
height: 150px;
text-align: center;
}
#div2{
background-color: black;
width: 70px;
height: 70px;
display: inline-block;
}
</style>
</head>
<body>
<div id="div1" class="classname">
<div id="div2" class="classname">
</div>
</div>
</body>
3、使用line-height让单行的文字垂直居中
把文字的line-height设为文字父容器的高度，适用于只有一行文字的情况。
4、使用表格：table
如果你使用的是表格的话，那完全不用为各种居中问题而烦恼了，只要用到 td(也可能会用到 th)元素的 align="center" 以及 valign="middle" 这两个属性就可以完美的处理它里面内容的水平和垂直居中问题了,而且表格默认的就会对它里面的内容进行垂直居中。如果想在css中控制表格内容的居中，垂直居中可以使用 vertical-align:middle，至于水平居中，貌似css中是没有相对应的属性的,但是在IE6、7中我们可以使用text-align:center来对表格里的元素进行水平居中，IE8+以及谷歌、火狐等浏览器的text-align:center只对行内元素起作用，对块状元素无效。
5、使用display:table-cell来居中
对于那些不是表格的元素，我们可以通过display:table-cell 来把它模拟成一个表格单元格，这样就可以利用表格那很方便的居中特性了。例如：
但是，这种方法只能在IE8+、谷歌、火狐等浏览器上使用，IE6、IE7都无效。
代码：
<style type="text/css">
body{
margin: 0;
padding: 0;
}
#div1{
border: 1px dashed red;
width: 150px;
height: 150px;
display: table-cell;
/*控制水平居中*/
text-align: center;
/*控制垂直居中*/
vertical-align: middle;
}
#div2{
background-color: black;
width: 70px;
height: 70px;
display: inline-block;
}
</style>
</head>
<body>
<div id="div1" class="classname">
<div id="div2" class="classname"> </div>
</div>
</body>
那面所说的都是很基础的方法，自然不能称之为奇淫巧计，下面就来说一些需要使用一些技巧的居中方法。
6、使用绝对定位来进行居中
效果图1：
代码1：
<style type="text/css">
body{
margin: 0;
padding: 0;
}
#div1{
border: 2px dashed red;
width: 150px;
height: 150px;
position: relative;
}
#div2{
background-color: black;
width: 70px;
height: 70px;
position: absolute;
/**
* top、和left的计算问题
* (152-70)/2=35
*/
top: 41px;
left: 41px;
}
</style>
</head>
<body>
<div id="div1" class="classname">
<div id="div2" class="classname"> </div>
</div>
</body>
效果图2：
代码2：
<style type="text/css">
body{
margin: 0;
padding: 0;
}
#div1{
border: 2px dashed red;
width: 110px;
height: 110px;
position: relative;
}
#div2{
background-color: black;
width: 70px;
height: 70px;
position: absolute;
/**
* margin-top、和margin-left的计算问题
* -70/2=-35
*/
left: 50%;
top: 50%;
margin-left: -35px; //子元素宽度负的一半
margin-top: -35px; //子元素高度负的一半
}
</style>
</head>
<body>
<div id="div1" class="classname">
<div id="div2" class="classname"> </div>
</div>
</body>
如果只想实现一个方向的居中，则可以只使用left , margin-left 来实现水平居中，使用top , margin-top来实现垂直居中。
7、另一种使用绝对定位来居中的方法
此法同样只适用于那些我们已经知道它们的宽度或高度的元素，并且遗憾的是它只支持IE9+,谷歌，火狐等符合w3c标准的现代浏览器。
下面用一段代码来了解这种方法：
效果图
代码:
<style type="text/css">
body{
margin: 0;
padding: 0;
}
#div1{
border: 2px dashed red;
width: 110px;
height: 110px;
position: relative;
}
#div2{
background-color: black;
width: 70px;
height: 70px;
position: absolute;
/**
* 此方法只适用高度宽度固定的
*/
/*left、right必须配对出现控制水平方向*/
left: 0;
right: 0;
/*top、bottom必须配对出现控制垂直方向*/
top: 0;
bottom: 0;
/*下面这句也是必不可少的*/
margin: auto;
}
</style>
</head>
<body>
<div id="div1" class="classname">
<div id="div2" class="classname"> </div>
</div>
</body>
这里如果不定义元素的宽和高的话，那么他的宽就会由left,right的值来决定，高会由top,bottom的值来决定，所以必须要设置元素的高和宽。同时如果改变left，right , top , bottom的值还能让元素向某个方向偏移，大家可以自己去尝试。
8、使用浮动配合相对定位来进行水平居中
此方法也是关于浮动元素怎么水平居中的解决方法，并且我们不需要知道需要居中的元素的宽度。
浮动居中的原理是：把浮动元素相对定位到父元素宽度50%的地方，但这个时候元素还不是居中的，而是比居中的那个位置多出了自身一半的宽度，这时就需要他里面的子元素再用一个相对定位，把那多出的自身一半的宽度拉回来，而因为相对定位正是相对于自身来定位的，所以自身一半的宽度只要把left 或 right 设为50%就可以得到了，因而不用知道自身的实际宽度是多少。
这种使用浮动配合相对定位来居中的方法，优点是不用知道要居中的元素的宽度，即使这个宽度是不断变化的也行；缺点是需要一个多余的元素来包裹要居中的元素。
看下代码：
http://www.cnblogs.com/2050/p/3392803.html
CSS布局居中的更多相关文章
- CSS布局——居中
参考文章1.CSS布局奇淫技巧之--各种居中 2.http://www.imooc.com/article/2235 1.行内元素水平居中text-align:center对图片,按钮,文字等行内元素 ...
- CSS布局---居中方法
在web页面布局中居中是我们常遇到的情况,而居中分为水平居中与垂直居中 文本的居中 CSS中对文本的居中做的非常友好,我们是需要text-align, line-height 两个属性就可以控制文本的 ...
- 【转】css布局居中和CSS内容居中区别和对应DIV CSS代码
原文地址:http://www.divcss5.com/jiqiao/j771.shtml css布局居中和CSS内容居中区别和对应DIV CSS代码教程与图文代码案例篇 对于新手来说DIV CSS布 ...
- CSS 布局实例系列（一）总结CSS居中的多种方法
使用 CSS 让页面元素居中可能是我们页面开发中最常见的拦路虎啦,接下来总结一下常见的几种居中方法吧. 1. 首先来聊聊水平居中: text-align 与 inline-block 的配合 就像这样 ...
- css布局之居中
CSS布局之居中 本文主要是介绍水平居中,垂直居中,还有水平垂直居中的方法 水平居中 1.行内元素水平居中 使用text-align:center;就可以实现行内元素的水平居中,但是记得要在父元素中设 ...
- 主流 CSS 布局(水平居中、垂直居中、居中 )
什么是布局 html 页面的整体结构或骨架 布局不是某个技术内容 而是一种设计思想 [ 布局方式 ] 水平居中布局 垂直居中布局 居中布局( 水平 + 垂直 ) 什么是水平居中布局 水平居中布局 元素 ...
- 界面设计技法之css布局
css布局之于页面就如同ECMAScript之于JS一般,细想一番,html就如同语文,css就如同数学,js呢,就是物理,有些扯远,这里就先不展开了. 回到主题,从最开始的css到如今的sass(l ...
- CSS 布局
近日开发中,总感觉页面布局方面力不从心.以前也曾学过这方面的内容,但是不够系统,因此我打算整理一下. 在web 页面中一般有 table 和 css+div 两种布局方式. 其中css+div 又分为 ...
- CSS布局（上）
CSS布局(上) *:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: 0 !import ...
随机推荐
- IntelliJ IDEA 2019.3 代码提示忽略大小写（IDEA 2019版本如何设置代码提示不分大小写？）
最近在使用IDEA,发现每次只能进行完全匹配,且区分大小写,界面变了IDEA 2019.3 忽略大小写设置跟之前的版本稍微有点不同,跟之前的软件有点点区别,在此记录一下不区分大小写的方法. 1. 使用 ...
- 对接网易云信音视频2.0呼叫组件集成到vue中，实现web端呼叫app，视频语音通话。
项目中需要实现视频通话功能,经过公司的赛选,采用网易云信的视频通话服务,app小伙伴集成很顺利.web端需要实现呼叫app端用户.网易云信文档介绍不全,vue的demo满足不了需求,和客服人员沟通,只 ...
- html基础 表单相关属性综合实战案例 附有注释
html结构代码: <form > <!-- form 为了让重置按钮生效--> <h1>青春不常在,抓紧谈恋爱</h1> <hr> 昵称: ...
- 初识python： 模块定义及调用
一.定义 模块:用来从逻辑上组织python代码(变量.函数.类.逻辑:实现一个功能),本质就是.py结尾的python文件(比如:文件名:test.py,对应的模块名:test) 包:用来从逻辑上组 ...
- Python爬取中国知网文献、参考文献、引证文献
前两天老师派了个活,让下载知网上根据高级搜索得到的来源文献的参考文献及引证文献数据,网上找了一些相关博客,感觉都不太合适,因此特此记录,希望对需要的人有帮助. 切入正题,先说这次需求,高级搜索,根据中 ...
- 方法覆盖 和toString方法的作用
当我们代码怎么编写的时候,在代码级别上构成了方法的覆盖呢? 两个类必须要有继承关系. 重写之后的方法和之前的方法具有:相同的返回值类型 相同的方法名 相同的形参列表 访问权限不能更高,只能更低 重写之 ...
- YBT 1633：【例 3】Sumdiv
http://ybt.ssoier.cn:8088/problem_show.php?pid=1633 A^B 快速幂求结果,所有约数和,可以通过组合来进行得到. 技巧,通过递归得到1~n次的和.su ...
- 图形验证插件，百度编辑器拓展功能，NodeJs消息机制以及聊天室
图形验证插件 网上找了很多图形验证插件,比较推荐verify.js <link rel="stylesheet" type="text/css" href ...
- HDU 1576 A/B （两种解法）
原题链接:http://acm.hdu.edu.cn/showproblem.php?pid=1576 分析:等式枚举法,由题意可得:, ,代入 , 得:,把变量 合在一起得: :即满足 为 倍 ...
- linux新分区无法新建文件夹
问题 因为最初分区480g随便都给了home,后来发现备份以及导出系统至IOS都要另外插硬盘很麻烦.所以需要重新分区.使用装机U盘的live ubuntu20系统使用Gparted分区后,发现回到Ub ...