专栏首页小狼的世界如何让高度、宽度不定的容器保持水平、垂直居中

如何让高度、宽度不定的容器保持水平、垂直居中

这个题目似乎解决的办法很多,JS是最能够确保各种浏览器中一致性的,但是仍然可以使用CSS的方式来解决。这个问题分解为两个方面,第一解决左右居中的问题,第二解决上下居中的问题。

1、左右居中。

左右居中最为简单,使用 text-align:center; 就可以让绝大多数的对象居中对齐,并且这个属性也获得了几乎全部浏览器的支持。实际上,这个属性定义的是块级对象内部文字的对齐方式,内部的文字或者图像一般是内联对象。

也许有人会提到,为什么不用 margin:0 auto;这个办法呢?这是一个好问题,在做居中布局的页面时,这是我们最常用的让DIV容器居中的办法。margin作用于块级元素,而是否作用于其他内敛元素,不同的浏览器有着不同的解释,因此对于左右居中,没有使用这个方法。

2、上下居中。

上下居中,有两种方法,一种是负margin的办法,这种对于固定宽度的容器,非常的好用。另外一种就是适应于高度不固定的情形,即使用 vertical-align 属性。Vertical-align 属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中,这个属性会设置单元格框中的单元格内容的对齐方式。

3、最后代码

综上,可以得出对于高度、宽度都不固定的容器,如何让其做到水平、垂直居中:

 1 <!DOCTYPE html>   
 2 <html>   
 3 <head>   
 4 <meta http-equiv=“Content-Type” content=“text/html; charset=utf-8″ />   
 5 <title>水平、垂直居中</title>   
 6 <style type=“text/css”>   
 7 #container_outer { display:table; width:1200px; height:1000px; overflow:hidden; margin-left:50px; _position:relative; }   
 8 #container_inner { vertical-align:middle; display:table-cell; text-align:center; _position:absolute; _top:50%; _left:50%; }   
 9 #content { color:#fff; border:1px solid #000; display:inline-block; _position:relative; _top:-50%; _left:-50%; }   
10 </style>   
11 <body>   
12 <div id=“container_outer”>
13      <div id=“container_inner”>
14           <div id=“content”>   
15 动态内容...
16 </div>
17 </div>
18 </div>   
19 
20 </body>   
21 </html> 

参考资料:

1、http://blog.mihoweb.com/archives/790.html

2、CSS text-align

3、http://www.cnblogs.com/zhwl/p/3529473.html

4、CSS vertical-align

5、http://www.jb51.net/css/10337.html

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 使用YUI3创建Popup弹出层

    很多互联网的项目应用中,弹出层出现的越来越多,使用YUI3可以快速的实现制作弹出层的效果。

    大江小浪
  • 什么是 Help Desk?

    科技如何帮助公司发展,关键就在于保证IT系统的安全稳定运行。我们都知道要保证系统100%可用非常难实现,那么如何在系统故障时减少处置时间?一个有效的办法就是帮助...

    大江小浪
  • PHP中正则的使用

    正则表达式,作为一种快速、便捷的处理字符串的工具,在各种编程语言中都有着广泛的用途,通过在PHP中的一些使用,下面记录一下关于PHP中正则使用的一些技巧。

    大江小浪
  • 在Html中使用Requirejs进行模块化开发

    在前端模块化的时候,不仅仅是js需要进行模块化管理,html有时候也需要模块化管理。这里就介绍下如何通过requirejs,实现html代码的模块化开发。 ...

    用户1154259
  • 老司机读书笔记——Weex学习笔记

    Weex整体上与Vue语法大概一直,基本用法由阿里进行二次封装。以下主要介绍Weex的一些内置组件。

    老司机Wicky
  • CSS实用技巧第一讲:文字处理

    作为程序猿的我们,书写代码也需要大量的技巧。一份良好的代码能让人耳目一新,让人容易理解,同时也让自己成就感满满。因此,在这里简单的整理一些CSS开发技巧,希望能...

    Javanx
  • Flutter-国际化适配终结者

    如图,先打开到上面的Plugins这一栏,然后点击插件列表下面的Browe repositories,然后在弹出的界面中输入Flutter i18n。

    rhyme_lph
  • 使用 CPU SSE2 指令集加速字符查找

    使用 php-ext-xlswriter 作为测试参考项目,在测试代码中导出一份 50W行 × 20列 的xlsx文件,每个单元格均为固定的字符(26字母),并...

    王杰新
  • Node.js基于Express框架搭建一个简单的注册登录Web功能

    这个小应用使用到了node.js  bootstrap  express  以及数据库的操作 :使用mongoose对象模型来操作 mongodb

    书童小二
  • 水平居中和垂直居中

    本章介绍几种常见的水平居中和垂直居中的实现方式 <!DOCTYPE html> <html> <head> <title>水平居中和垂直居中</titl...

    echobingo

扫码关注云+社区

领取腾讯云代金券