如何让div水平垂直居中_html/css_WEB-ITnose
程序员文章站
2022-05-17 10:30:03
...
如何让div水平垂直居中
@(css)[妙瞳]
引子
我们经常遇到需要把div中的内容进行水平和垂直居中。所以,这里介绍一种方法,可以使div水平居中和垂直居中。
代码:
div水平垂直居中
效果图:
现在先让图片在div中水平居中
我们可以先给图片套一层盒子。
代码:
div水平垂直居中
IE8/Firefox/Chrome/Safari/Opera页面效果:
IE6/IE7页面效果:
由此可见要做IE6/IE7的兼容:
代码:
div水平垂直居中
IE6/IE7效果图:
综上所述,要让div里面的内容水平居中,可以使用text-align:center;
要实现垂直居中,container 的display:table;而wrapper的display:table-cell;同时vertical-align:middle;就可以实现div里的图片水平垂直居中。
假如是多张图片,要实现居中:
代码:
div水平垂直居中
IE6/IE7/IE8/Firefox/Chrome/Safari/Opera页面效果:
div.wrapper中的text-align:center;实现水平居中,margin-top:28px;实现垂直居中。
28px=[500-(200+1+1+10+10)*2]/2,即外层的高度减去里面的高度,然后除以2,设置margin-top,即可居中。
假如有错误或者建议的地方,欢迎指正!-----妙瞳。
推荐阅读
-
老板的手机收到一个红包,为什么红包没居中?如何让一个元素水平垂直居中?
-
【每日一题】怎么让一个 div 水平垂直居中?(三种常用方式)
-
以下代码如何让DIV先隐藏_html/css_WEB-ITnose
-
div的垂直居中_html/css_WEB-ITnose
-
如何让下图中的红色部分(span)内的文字相对于红色部分竖直方向上居中呢?源代码如下,图在第二楼_html/css_WEB-ITnose
-
如何让Div始终保持水平居中或者垂直居中_html/css_WEB-ITnose
-
css如何将div实现全屏水平垂直居中_html/css_WEB-ITnose
-
div的垂直居中_html/css_WEB-ITnose
-
如何让DIV显示适应不同的分辨率?_html/css_WEB-ITnose
-
解读 CSS 布局之水平垂直居中_html/css_WEB-ITnose