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布局居中的更多相关文章

  1. CSS布局——居中

    参考文章1.CSS布局奇淫技巧之--各种居中 2.http://www.imooc.com/article/2235 1.行内元素水平居中text-align:center对图片,按钮,文字等行内元素 ...

  2. CSS布局---居中方法

    在web页面布局中居中是我们常遇到的情况,而居中分为水平居中与垂直居中 文本的居中 CSS中对文本的居中做的非常友好,我们是需要text-align, line-height 两个属性就可以控制文本的 ...

  3. 【转】css布局居中和CSS内容居中区别和对应DIV CSS代码

    原文地址:http://www.divcss5.com/jiqiao/j771.shtml css布局居中和CSS内容居中区别和对应DIV CSS代码教程与图文代码案例篇 对于新手来说DIV CSS布 ...

  4. CSS 布局实例系列(一)总结CSS居中的多种方法

    使用 CSS 让页面元素居中可能是我们页面开发中最常见的拦路虎啦,接下来总结一下常见的几种居中方法吧. 1. 首先来聊聊水平居中: text-align 与 inline-block 的配合 就像这样 ...

  5. css布局之居中

    CSS布局之居中 本文主要是介绍水平居中,垂直居中,还有水平垂直居中的方法 水平居中 1.行内元素水平居中 使用text-align:center;就可以实现行内元素的水平居中,但是记得要在父元素中设 ...

  6. 主流 CSS 布局(水平居中、垂直居中、居中 )

    什么是布局 html 页面的整体结构或骨架 布局不是某个技术内容 而是一种设计思想 [ 布局方式 ] 水平居中布局 垂直居中布局 居中布局( 水平 + 垂直 ) 什么是水平居中布局 水平居中布局 元素 ...

  7. 界面设计技法之css布局

    css布局之于页面就如同ECMAScript之于JS一般,细想一番,html就如同语文,css就如同数学,js呢,就是物理,有些扯远,这里就先不展开了. 回到主题,从最开始的css到如今的sass(l ...

  8. CSS 布局

    近日开发中,总感觉页面布局方面力不从心.以前也曾学过这方面的内容,但是不够系统,因此我打算整理一下. 在web 页面中一般有 table 和 css+div 两种布局方式. 其中css+div 又分为 ...

  9. CSS布局(上)

    CSS布局(上) *:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: 0 !import ...

随机推荐

  1. 编写Java程序,使用日期处理类实现日期的格式化输出

    返回本章节 返回作业目录 需求说明: 按"yyyy-MM-dd"格式输入一个字符串型日期,然后输出这个日期为本年中的第几周. 实现思路: 使用SimpleDateFormat格式化 ...

  2. 前端必备,5大mock省时提效小tips,用了提前下班一小时

    ​ 一.一些为难前端的业务场景 在我的工作经历里,需要等待后端童鞋配合我的情形大概有以下几种: a.我们跟外部有项目合作,需要调用到第三方接口. 一般这种情况下,商务那边谈合同,走流程,等第三方审核, ...

  3. BUG—Nuget包版本不一致导致程序行为与预期不符

    注:本文收录于<Bug集锦>,请点击此处查看全文目录 BUG起因 先介绍一下背景: 数周前的一个极其平常的下午,完成了本次迭代的开发工作,发布到QA提测,然后开始摸鱼.没几分钟,测试就来找 ...

  4. Swoole 中使用 Context 类管理上下文,防止发生数据错乱

    前面的文章中,我们说过:不能使用类静态变量 Class::$array / 全局变量 global $_array / 全局对象属性 $object->array / 其他超全局变量 $GLOB ...

  5. elasticsearch设置密码

    ELK - X-Pack设置用户密码 enable X-Pack security vi elasticsearch.yml #首先开启x-pack插件 xpack.security.enabled: ...

  6. Linux系统使用SSH登录之前如何显示横幅消息

    OpenSSH有一个名为Banner的内置选项.在允许身份验证之前,将指定文件的内容发送给远程用户.如果Banner选项设置为none,那么在ssh登录时就不会显示任何Banner消息.默认情况下,不 ...

  7. JSP页面实际上就是Servlet

    注:图片如果损坏,点击文章链接:https://www.toutiao.com/i6513069824690618883/ 前面一直提到了Servlet的内容,也是我们平时理解的后台,这次说一下前台的 ...

  8. 使用Swing的GUI编程

    Swing AWT概述 AWT:抽象窗口工具包,提供了一套与本地图形界面进行交互的接口,是Java提供的用来建立和设置Java的图形用户界面的基本工具 Swing以AWT为基础的,尽管Swing消除了 ...

  9. 离线环境安装使用 Ansible

    之前写了一篇介绍 Ansible 的文章 ,今天回顾看来写的有些匆忙,一些具体的操作步骤都没有讲明白,不利于读者复现学习.最近又申请了一个几百台机器的环境,正好借此机会把如何在离线环境中使用 Ansi ...

  10. 一文搞定 Windows Terminal 设置与 zsh 安装 (非WSL)

    为 Windows Terminal 添加标签页 添加 Anaconda 标签页 在settings.json文件中的list列表中添加设置项: { // Make changes here to t ...