• 欢迎访问奇跡の海网站,本站不上传任何资源,所有资源均来自于网络,欢迎加入奇跡の海~!奇跡の海-WordPress QQ群
  • 本站下载资源为网络上收集整理而来,并且以计算机技术研究交流为目的,版权归原作者所有,仅供大家参考,学习,不存在任何商业目的与商业用途.
  • 本站系统镜像均来自于官方原版,ed2k可视为P2P下载链接。所有操作系统默认均为试用版,如有正版密钥可以有效激活,本站不提供任何激活和相关服务。

CSS的各种居中(CSS的居中有水平居中和垂直居中)

编程开发 奇跡の海 2年前 (2017-07-05) 632次浏览 已收录 0个评论 扫描二维码

CSS的各种居中(CSS的居中有水平居中和垂直居中)
CSS的居中有水平居中和垂直居中,这两种居中又分为行内元素居中和块级元素居中,不同的居中用不同方法。

水平居中

行内元素水平居中(文本,图片)

给父层设置 text-align:center; 可以实现行内元素水平居中。

<!DOCTYPE HTML> 
<html lang="en-US"> 
<head> 
<meta charset="UTF-8"> 
<title></title> 

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cstyle%20type%3D%22text%2Fcss%22%3E%20%0A.center%7Btext-align%3Acenter%3B%7D%20%0A%3C%2Fstyle%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;style&gt;" title="&lt;style&gt;" />

 
</head> 
<body> 

<div class="center"> 
<a href="http://www.google.com.hk/">谷歌搜索</a>

 
<img src="cat.jpg" width="248" height="162" alt=""/> 
</div>

 
</body> 
</html> 

确定宽度块级元素水平居中

确定宽度的块级元素水平居中,常用的有 margin:0 auto; 相信很多开发人员都用的是这个,不过本人认为还有更好的写法:margin-left:auto;margin-right:auto; 因为 margin-top 和 margin-bottom 在重置 css 时就已经写了为 0 了。

<!DOCTYPE HTML> 
<html lang="en-US"> 
<head> 
<meta charset="UTF-8"> 
<title></title> 

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cstyle%20type%3D%22text%2Fcss%22%3E%20%0A.center%7Bwidth%3A100px%3Bheight%3A100px%3Bmargin-left%3Aauto%3Bmargin-right%3Aauto%3Bbackground%3Agreen%3B%7D%20%0A%3C%2Fstyle%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;style&gt;" title="&lt;style&gt;" />

 
</head> 
<body> 

<div class="center"></div>

 
</body> 
</html> 

不确定宽度的块级元素水平居中

不确定宽度的块级元素有三种方法实现。
方法一:

<!DOCTYPE HTML> 
<html lang="en-US"> 
<head> 
<meta charset="UTF-8"> 
<title></title> 

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cstyle%20type%3D%22text%2Fcss%22%3E%20%0A*%7Bmargin%3A0%3Bpadding%3A0%3B%7D%20%0Aul%7Blist-style%3Anone%3B%7D%20%0Atable%7Bmargin-left%3Aauto%3Bmargin-right%3Aauto%3B%7D%20%0A.demo%20li%7Bfloat%3Aleft%3Bdisplay%3Ainline%3Bmargin-right%3A5px%3B%7D%20%0A.demo%20a%7Bfloat%3Aleft%3Bwidth%3A20px%3Bheight%3A20px%3Btext-align%3Acenter%3Bline-height%3A20px%3Bbackground%3A%23316ac5%3Bcolor%3Awhite%3Bborder%3A1px%20solid%20%23316ac5%3Btext-decoration%3Anone%3B%7D%20%0A.demo%20a%3Ahover%7Bbackground%3Awhite%3Bcolor%3A%23316ac5%3B%7D%20%0A%3C%2Fstyle%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;style&gt;" title="&lt;style&gt;" />

 
</head> 
<body> 

<table> 

<tbody> 

<tr> 

<td>
 

<ul class="demo"> 

<li><a href="#">1</a></li>

 
</ul>

 
</td>

 
</tr>

 
</tbody>

 
</table>

 

<table> 

<tbody> 

<tr> 

<td>
 

<ul class="demo"> 

<li><a href="#">1</a></li>

 

<li><a href="#">2</a></li>

 

<li><a href="#">3</a></li>

 
</ul>

 
</td>

 
</tr>

 
</tbody>

 
</table>

 

<table> 

<tbody> 

<tr> 

<td>
 

<ul class="demo"> 

<li><a href="#">1</a></li>

 

<li><a href="#">2</a></li>

 

<li><a href="#">3</a></li>

 

<li><a href="#">4</a></li>

 

<li><a href="#">5</a></li>

 
</ul>

 
</td>

 
</tr>

 
</tbody>

 
</table>

 
</body> 
</html> 

这里用到了 table 标签来实现不确定宽度的块级元素水平居中。table 本身不是块级元素,如果不给它设定宽度的话,会由内部元素的宽度“撑开”,但即使不设定它的宽度,仅设置 margin-left:auto 和 margin-right:auto 就可以实现水平居中。
这种方法很巧妙,但是增加了无语义标签,加深了标签的嵌套层数。
方法二:

<!DOCTYPE HTML> 
<html lang="en-US"> 
<head> 
<meta charset="UTF-8"> 
<title></title> 

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cstyle%20type%3D%22text%2Fcss%22%3E%20%0A*%7Bmargin%3A0%3Bpadding%3A0%3B%7D%20%0Aul%7Blist-style%3Anone%3B%7D%20%0A.wrapper%7Bwidth%3A500px%3Bheight%3A100px%3Bbackground%3Ablack%3B%7D%20%0A.demo%7Btext-align%3Acenter%3Bpadding%3A5px%3B%7D%20%0A.demo%20li%7Bdisplay%3Ainline%3B%7D%20%0A.demo%20a%7Bpadding%3A2px%206px%3Bbackground%3A%23316ac5%3Bcolor%3Awhite%3Bborder%3A1px%20solid%20%23316ac5%3Btext-decoration%3Anone%3B%7D%20%0A.demo%20a%3Ahover%7Bbackground%3Awhite%3Bcolor%3A%23316ac5%3B%7D%20%0A%3C%2Fstyle%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;style&gt;" title="&lt;style&gt;" />

 
</head> 
<body> 

<div class="wrapper">
 

<ul class="demo"> 

<li><a href="#">1</a></li>

 
</ul>

 

<ul class="demo"> 

<li><a href="#">1</a></li>

 

<li><a href="#">2</a></li>

 

<li><a href="#">3</a></li>

 
</ul>

 

<ul class="demo"> 

<li><a href="#">1</a></li>

 

<li><a href="#">2</a></li>

 

<li><a href="#">3</a></li>

 

<li><a href="#">4</a></li>

 

<li><a href="#">5</a></li>

 
</ul>

 
</div>

 
</body> 
</html> 

方法二是改变元素的 display 值,使块级元素变成行内元素,然后使用 text-align:center 使其居中。相对于方法一,它不用增加无语义标签,简化了标签的嵌套深度,但它也存在一定的问题:它将块级元素变成了行内元素,这样就失去了一些块级元素的功能,比如设置宽度,高度。
方法三:

<!DOCTYPE HTML> 
<html lang="en-US"> 
<head> 
<meta charset="UTF-8"> 
<title></title> 

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cstyle%20type%3D%22text%2Fcss%22%3E%20%0A*%7Bmargin%3A0%3Bpadding%3A0%3B%7D%20%0Aul%7Blist-style%3Anone%3B%7D%20%0A.wrapper%7Bwidth%3A500px%3Bheight%3A100px%3Bbackground%3Ablack%3B%7D%20%0A.demo%7Bclear%3Aboth%3Bpadding-top%3A5px%3Bfloat%3Aleft%3Bposition%3Arelative%3Bleft%3A50%25%3B%7D%20%0A.demo%20li%7Bdisplay%3Ainline%3Bfloat%3Aleft%3Bmargin-right%3A5px%3Bposition%3Arelative%3Bleft%3A-50%25%3B%7D%20%0A.demo%20a%7Bfloat%3Aleft%3Bwidth%3A20px%3Bheight%3A20px%3Btext-align%3Acenter%3Bline-height%3A20px%3Bbackground%3A%23316ac5%3Bcolor%3Awhite%3Bborder%3A1px%20solid%20%23316ac5%3Btext-decoration%3Anone%3B%7D%20%0A.demo%20a%3Ahover%7Bbackground%3Awhite%3Bcolor%3A%23316ac5%3B%7D%20%0A%3C%2Fstyle%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;style&gt;" title="&lt;style&gt;" />

 
</head> 
<body> 

<div class="wrapper">
 

<ul class="demo"> 

<li><a href="#">1</a></li>

 
</ul>

 

<ul class="demo"> 

<li><a href="#">1</a></li>

 

<li><a href="#">2</a></li>

 

<li><a href="#">3</a></li>

 
</ul>

 

<ul class="demo"> 

<li><a href="#">1</a></li>

 

<li><a href="#">2</a></li>

 

<li><a href="#">3</a></li>

 

<li><a href="#">4</a></li>

 

<li><a href="#">5</a></li>

 
</ul>

 
</div>

 
</body> 
</html> 

方法三通过给父层设置浮动和相对定位以及 left:50%,子元素设置相对定位和 left:-50% 来实现水平居中。它可以保留块级元素的功能,而且不会添加无语义标签,不增加嵌套深度,但是设置了相对定位,会带来一定的副作用。
这三种方法各有优缺点,具体使用哪种方法可以视具体情况而定。

垂直居中

父层高度不确定的垂直居中

通过给父层设置相同的上下内边距实现。

<!DOCTYPE HTML> 
<html lang="en-US"> 
<head> 
<meta charset="UTF-8"> 
<title></title> 

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cstyle%20type%3D%22text%2Fcss%22%3E%20%0A*%7Bmargin%3A0%3Bpadding%3A0%3B%7D%20%0A.demo%7Bwidth%3A500px%3Bcolor%3Awhite%3Bmargin-bottom%3A10px%3Bpadding-top%3A20px%3Bpadding-bottom%3A20px%3Bbackground%3Ablack%3B%7D%20%0A.content%7Bwidth%3A200px%3Bheight%3A50px%3Bbackground%3Ared%3B%7D%20%0A%3C%2Fstyle%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;style&gt;" title="&lt;style&gt;" />

 
</head> 
<body> 

<div class="demo">hello world</div>

 

<div class="demo"><img src="cat.jpg" width="248" height="162" alt=""/></div>

 

<div class="demo">
<div class="content"></div>
</div>

 
</body> 
</html> 

父层高度确定的单行文本垂直居中

通过给父层设置行高来实现,行高和父层高度相同。

<!DOCTYPE HTML> 
<html lang="en-US"> 
<head> 
<meta charset="UTF-8"> 
<title></title> 

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cstyle%20type%3D%22text%2Fcss%22%3E%20%0A*%7Bmargin%3A0%3Bpadding%3A0%3B%7D%20%0A.demo%7Bwidth%3A500px%3Bcolor%3Awhite%3Bbackground%3Ablack%3Bheight%3A100px%3Bline-height%3A100px%3B%7D%20%0A%3C%2Fstyle%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;style&gt;" title="&lt;style&gt;" />

 
</head> 
<body> 

<div class="demo">hello world</div>

 
</body> 
</html> 

父层高度确定的多行文本、图片、块级元素垂直居中

方法一:
说到垂直居中,css 中有个用于垂直居中的属性 vertical-align,但只有在父层为 td 或者 th 时,这个属性才会生效,对于其他块级元素,例如 div、p 等,默认情况是不支持的。在 firefox 和 ie8 下,可以设置块级元素的 display 值为 table-cell,来激活 vertical-align 属性,但 ie6,7 并不支持,所以这种方法没有办法跨浏览器兼容。但是我们可以使用 table。

<!DOCTYPE HTML> 
<html lang="en-US"> 
<head> 
<meta charset="UTF-8"> 
<title></title> 

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cstyle%20type%3D%22text%2Fcss%22%3E%20%0A*%7Bmargin%3A0%3Bpadding%3A0%3B%7D%20%0A.wrapper%7Bbackground%3Ablack%3Bwidth%3A500px%3Bcolor%3Awhite%3Bheight%3A100px%3B%7D%20%0A.demo%7Bwidth%3A200px%3Bbackground%3Ared%3Bheight%3A50px%3B%7D%20%0A%3C%2Fstyle%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;style&gt;" title="&lt;style&gt;" />

 
</head> 
<body> 

<table> 

<tr> 

<td class="wrapper"> 
hellow world
 
hellow world
 
hellow world
 
</td>

 
</tr>

 
</table>

 

<table> 

<tr> 

<td class="wrapper"> 
<img src="cat.jpg" alt=""/> 
</td>

 
</tr>

 
</table>

 

<table> 

<tr> 

<td class="wrapper">
 

<div class="demo"></div>

 
</td>

 
</tr>

 
</table>

 
</body> 
</html> 

table 可以很好的实现垂直居中效果,但是它添加了无语义标签,增加了嵌套深度。
方法二:
对支持 display:table-cell 的 ie8 和 firefox 用 display:table-cell 和 vertical-align:middle 来实现居中,对不支持 display:table-cell 的 ie6 和 ie7 使用 hack 写法。

<!DOCTYPE HTML> 
<html lang="en-US"> 
<head> 
<meta charset="UTF-8"> 
<title></title> 

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cstyle%20type%3D%22text%2Fcss%22%3E%20%0A*%7Bmargin%3A0%3Bpadding%3A0%3B%7D%20%0A.mb%7Bmargin-bottom%3A10px%3B%7D%20%0A.wrapper%7Bbackground%3Ablack%3Bwidth%3A500px%3Bcolor%3Awhite%3Bheight%3A100px%3Bmargin-bottom%3A10px%3Bdisplay%3Atable-cell%3Bvertical-align%3Amiddle%3B*position%3Arelative%3B%7D%20%0A.demo%7Bwidth%3A200px%3Bbackground%3Ared%3Bheight%3A50px%3B%7D%20%0A.vam%7B*position%3Aabsolute%3B*top%3A50%25%3B%7D%20%0A.va%7B*position%3Arelative%3B*top%3A-50%25%3B%7D%20%0A%3C%2Fstyle%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;style&gt;" title="&lt;style&gt;" />

 
</head> 
<body> 

<div class="mb10">
 

<div class="wrapper">
 

<div class="vam">
 

<div class="va"> 
hellow world
 
hellow world
 
hellow world 
</div>

 
</div>

 
</div>

 
</div>

 

<div class="mb10">
 

<div class="wrapper">
 

<div class="vam"> 
<img src="cat.jpg" alt=""/> 
</div>

 
</div>

 
</div>

 

<div class="mb10">
 

<div class="wrapper">
 

<div class="vam">
 

<div class="va demo"></div>

 
</div>

 
</div>

 
</div>

 
</body> 
</html> 

利用 hack 技术区别对待 firefox、ie8 和 ie6、ie7,在不支持 display:table-cell 的 ie6 和 ie7 下,通过给父子两层元素分别设置 top:50% 和 top:-50% 来实现居中。这种方法的好处是没有增加额外的标签,但缺点也很明显,一方面它使用了 hack,不利于维护,另一方面,它设置了 position:relative 和 position:absolute,带来了副作用。


版权声明:本站所有文章和资源使用CC BY-NC-SA 4.0协议授权发布 , 转载应当以相同方式注明文章来自“SeaOMC.COM->CSS的各种居中(CSS的居中有水平居中和垂直居中)!在下边可以分享本文哦!
喜欢 (0)
[]
分享 (0)
奇跡の海
关于作者:
一个WordPress菜鸟!
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址