你对DIV内容居中的方法是否了解，本文向大家描述一下用CSS实现DIV内容居中的几种方法，首先，要有一个概思：但凡table布局可以实隐的，CSS一订可以真隐。CSS可以完成的，table已必能做到。
如何用CSS实现DIV内容居中
在CSS网页布局中，会屡次使用DIV层节制内容布局，良多时分人们请求DIV层中内容居中显示，并且少数是正在有高度的情形下，或许DIV高度不订的情形下才用，而且完成的方式也没有少，不必定要拘泥于和table布局一样。
首先，要有一个概思：但凡table布局可以实隐的，CSS一订可以真隐。CSS可以完成的，table已必能做到。
如今来几个例子：
一、双行DIV内容居中
只斟酌双止是最简略的，不管能否给容器流动高度，只需给容器设放line-height和height，并使两值相等，再加上over-flow:hidden便能够了
- .middle-demo-1{
- height:4em;
- line-height:4em;
- overflow:hidden;
- }
优点：
1.同时支持块级和内联极元素
2.支持一切浏览器
缺点：
1.只能显示一行
2.IE中不支持等的居中
要注意的是：
1.使用绝对高度定义您的height和line-height
2.没有念誉了您的布局的话，overflow:hidden必定要
为什么？
请比拟以下两个例子：
- <pstylepstyle="background:#900;color:#00f;font:bold12px/24pxHelvertica,Arial,sans-serif;height:24px;width:370px;">
- Loremipsumdolorsitamet,consectetueradipiscingelit.p>
- <br/>
- <br/>
- <pstylepstyle="background:#090;color:#00f;font:bold12px/2emHelvertica,Arial,sans-serif;height:2em;width:370px;overflow:hidden;">
- Loremipsumdolorsitamet,consectetueradipiscingelit.p>
上一个高度是用的相对单位px，并且出有隐蔽溢出，下一个高度用的双位是绝对单位em，并且暗藏了溢出。假如您的浏览器支持搁大字体,新网科技，那么纵情天搁大字体，瞅望会呈现什么后果。#p#
二、少止DIV内容居中，且容器高度可变
也很简略，给出分歧的padding-bottom和padding-top便止
- .middle-demo-2{
- padding-top:24px;
- padding-bottom:24px;
- }
优点：
1.同时支撑块级和内联极元荤
2.支持非白原内容
3.支撑一切阅读器
缺点：
容器不能流动高度
三、把容器该作表格单元
CSS降求一系列diplay属性值，包含display:table,display:table-row,display:table-cell等，能把元素该做表格单元来显示。这是再加上vertical-align:middle,就和表格中的valign="center"一样了。
- .middle-demo-3{
- display:table-cell;
- height:300px;
- vertical-align:middle;
- }
惋惜IE不支持那些属性，不外在其他涉猎器上显示后果十分完善。
要注意的是：和一个正当的
