水平垂直居中图片及文字(兼容IE6+)

最新推荐文章于 2018-03-09 17:57:13 发布

转载最新推荐文章于 2018-03-09 17:57:13 发布 · 363 阅读

前端同时被 2 个专栏收录

5 篇文章

订阅专栏

conclusion

3 篇文章

订阅专栏

本文介绍了一种使用CSS实现不固定宽高div水平垂直居中的方法。通过设置父容器的display属性为table，并利用vertical-align和text-align属性，使得子元素能够实现水平垂直居中显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

简介：

如何使用css让不固定宽高的div水平垂直居中呢？这个问题似乎有很多解决办法，尝试了网上的最简单且兼容低版本浏览器的方法，但发现存在一些小问题，所以写此文章留存。

1、水平居中

1.1、父容器container添加css属性text-align:center; 子容器center添加css属性display:inline-block;

1.2、代码如下：

 
    XHTML
   
         <!DOCTYPE html>
        
         <html>
        
         <head>
        
         <meta
         charset
         =
         "utf-8"
         >
        
         <meta
         http-equiv
         =
         "X-UA-Compatible"
         
         content
         =
         "IE=edge"
         >
        
         <title>
         水平居中
         </title>
        
         <meta
         name
         =
         "description"
         
         content
         =
         ""
         >
        
         <meta
         name
         =
         "viewport"
         
         content
         =
         "width=device-width, initial-scale=1"
         >
        
             <style>
        
         *
         {
         
         margin
         :
         
         0
         ;
         
         padding
         :
         
         0
         ;
         
         font-size
         :
         
         12px
         ;
         
         color
         :
         
         #FFF
         ;
         
         }
        
         .container
         {
         
         text-align
         :
         
         center
         ;
         
         /*主要代码*/
        
         width
         :
         
         800px
         ;
         
         height
         :
         
         200px
         ;
         
         margin
         :
         
         0
         
         auto
         ;
         
         background-color
         :
         
         #FF5E53
         ;
        
         }
        
         .center
         {
         
         display
         :
         
         inline-block
         ;
         
         /*主要代码*/
        
         *display
         :
         
         inline
         ;
         
         zoom
         :
         
         1
         ;
         
         /*for ie67*/
        
         padding
         :
         
         10px
         ;
         
         border
         :
         
         1px
         
         solid
         
         #FFF
         ;
        
         }
        
         </style>
        
         </head>
        
         <body>
        
         <div
         class
         =
         "container"
         >
        
         <div
         class
         =
         "center"
         >
        
                 1、将父级元素设为text-align: center; 2、自身div设置为display: inline-block;
        
         </div>
        
         </div>
        
         </body>
        
         </html>

运行代码

2、水平垂直居中

2.1、具体还是看代码吧！

2.2、代码如下：

 
         <!DOCTYPE html>
        
         <html>
        
         <head>
        
         <meta
         charset
         =
         "utf-8"
         >
        
         <meta
         http-equiv
         =
         "X-UA-Compatible"
         
         content
         =
         "IE=edge"
         >
        
         <title>
         水平垂直居中
         </title>
        
         <meta
         name
         =
         "description"
         
         content
         =
         ""
         >
        
         <meta
         name
         =
         "viewport"
         
         content
         =
         "width=device-width, initial-scale=1"
         >
        
             <style>
        
         *
         {
         
         margin
         :
         
         0
         ;
         
         padding
         :
         
         0
         ;
         
         font-size
         :
         
         12px
         ;
         
         color
         :
         
         #FFF
         ;
         
         }
        
         .container
         {
        
         display
         :
         
         table
         ;
         
         /*主要代码*/
        
         *position
         :
         
         relative
         ;
           
         /*for ie67*/
        
         background-color
         :
         
         #FF5E53
         ;
         
         width
         :
         
         800px
         ;
         
         height
         :
         
         200px
         ;
         
         overflow
         :
         
         hidden
         ;
         
         margin
         :
         
         0
         
         auto
         ;
        
         }
        
         .content
         {
        
         vertical-align
         :
         
         middle
         ;
         
         display
         :
         
         table-cell
         ;
         
         text-align
         :
         
         center
         ;
         
         /*主要代码*/
        
         *position
         :
         
         absolute
         ;
         
         *top
         :
         
         50%
         ;
         
         *left
         :
         
         50%
         ;
         
         /*for ie67*/
        
         }
        
         .center
         {
        
         display
         :
         
         inline-block
         ;
         
         /*主要代码*/
        
         *display
         :
         
         inline
         ;
         
         zoom
         :
         
         1
         ;
         
         *position
         :
         
         relative
         ;
         
         *top
         :
         
         -50%
         ;
         
         *left
         :
         
         -50%
         ;
         
         /*for ie67*/
        
         padding
         :
         
         10px
         ;
         
         border
         :
         
         1px
         
         solid
         
         #fff
         ;
        
         }
        
         </style>
        
         </head>
        
         <body>
        
         <div
         class
         =
         "container"
         >
        
         <div
         class
         =
         "content"
         >
        
         <div
         class
         =
         "center"
         >
        
         <img
         src
         =
         "http://static.ydcss.com/www/img/logo.png"
          />
         <br/>
        
                     啦啦啦，啦啦啦，我是卖报的小行家....
        
         </div>
        
         </div>
        
         </div>
        
         </body>
        
         </html>