精华内容
下载资源
问答
  • 我们都知道,固定高宽的div在网页中垂直居中很简单,相信大家也很容易写出来,但是不是固定高宽的div如何垂直居中呢?我们在网页布局,特别是手机等web端网页经常是不固定高宽的div,那么这些div如何垂直居中呢?...

    我们都知道,固定高宽的div在网页中垂直居中很简单,相信大家也很容易的写出来,但是不是固定高宽的div如何垂直居中呢?我们在网页布局,特别是手机等web端网页经常是不固定高宽的div,那么这些div如何垂直居中呢?这篇文章,我总结一下。


    实现文本居中

    最简单的方法:

    .out{

      /*使用 height 与 line-height 高度一样ss 实现居中*/

            height: 700px;
            line-height: 700px;
            text-align: center;

    }



    第二种文本居中:

    <!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>居中方法</title>
        <meta name="description" content="">
        <meta name="keywords" content="">
        <link href="" rel="stylesheet">
        <style type="text/css">
        .out {
            width: 700px;
            height: 700px;
            margin: auto;
            border: 1px solid;
            /*使用 display的 flex 实现居中*/
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        .li {
            width: 200px;
            height: 100px;
            background-color: yellow;
            border: 1px solid;
            /*使用 display的 flex 实现文本 居中*/
            /* display:flex;
            justify-content:center;
            align-items:center*/
            
            /*vertical-align对一些特定显示样式
            (例如单元格显示方式:table-cell)的元素才会起作用。
            所以要实现上下垂直居中对齐,可以采用如下样式*/
            display: table-cell;
            /*按照单元格的样式显示元素*/
            vertical-align: middle;
            /*垂直居中对齐*/
            text-align: center;
            /*水平居中对齐*/
        }
        </style>
    </head>
    
    <body>
        <div class="out">
            <!-- 外部居中-测试 -->
            <div class="li">
                <p class="li">文本居中</p>
            </div>
        </div>
    </body>
    
    </html>
    

    
    


    实现div等居中

    第一种方法:

    固定高宽div垂直居中

    enter image description here


    如上图,固定高宽的很简单,写法如下:

    <!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>居中方法</title>
        <meta name="description" content="">
        <meta name="keywords" content="">
        <link href="" rel="stylesheet">
        <style type="text/css">
        .out {
            width: 700px;
            height: 700px;
            margin: auto;
            border: 1px solid;
            position: relative;
        }
        
         .li {
        	width: 200px;
        	height: 100px;
            background-color: yellow;
            border: 1px solid;
            text-align: center;
            /*加上下面3句话,可以居中*/
           /* margin: auto;  
             position: absolute;
            top: 0;left: 0;right: 0; bottom: 0;
            */
    			position: absolute;
    			top: 50%;
    			left: 50%;
    			margin-left:-100px;
                margin-top:-50px;
         }
    
    
        </style>
    </head>
    
    <body>
        <div class="out">
         
            外部居中-测试
            <div class="li">
                <p class="pcss">文本居中</p>
            </div>
        </div>
    </body>
    
    </html>

    第二种方法;
    <!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>居中方法</title>
        <meta name="description" content="">
        <meta name="keywords" content="">
        <link href="" rel="stylesheet">
        <style type="text/css">
        .out {
            width: 700px;
            height: 700px;
            margin: auto;
            border: 1px solid;
            /*使用 display的 flex 实现居中*/
            display:flex;
            justify-content:center;
            align-items:center;
             
        }
        
         .li {
        	width: 200px;
        	height: 100px;
            background-color: yellow;
            border: 1px solid;
            
         }
    
    
        </style>
    </head>
    
    <body>
        <div class="out">
         
            <!-- 外部居中-测试 -->
            <div class="li">
                <p class="li">文本居中</p>
            </div>
        </div>
    </body>
    
    </html>
    


    展开全文
  • CSS div文本垂直居中

    2017-08-31 11:41:02
    CSS div文本垂直居中  问题:vertical-align,在div中设置文本垂直居中,是不起作用。那怎么样设置div文本垂直居中哦! 关于"CSS文本垂直居中"文章在网上可以找到很多,它们主要涉及3种...

    CSS div文本垂直居中 

    问题:vertical-align,在div中设置文本垂直居中,是不起作用的。那怎么样设置div的文本垂直居中哦!
    关于"CSS文本垂直居中"的文章在网上可以找到很多,它们主要涉及3种方法:

    1、单行文本垂直居中:
    方法:把文本段落高度(line-height)和所在区域高度(height)设为一致即可。
    缺点:这种方法只对单行文本有效。

    代码:
    <div style="border:1px solid #ccc; height:50px; line-height:50px;">
    网站开发日志
    </div>


    2、多行文本垂直居中:
    方法: 不设区域高度(让高度自适应), 然后在区域上下位置使用相同的填充控制,即使用padding属性。
    缺点:对固定高度的区间无效。

    代码:
    <div style="border:1px #ccc solid; padding:20px 0; width:578px;">
    本博客用于记录网站开发的点点滴滴。包括网站设计,编程指南,资源和灵感。
    本站的文章大都是原创或者翻译作品。
    </div>


    3、浏览器居中:

    方法: 设置position属性为绝对(absolute), 然后把在上方留下浏览器高度一半减去文本区域高度一半的距离,例如文本区域高度为浏览器高度的20%,那么上方应该留下50%-10%=40%;同理,在左边留下浏览器宽度一半减去文本区域宽度一半的距离。
    缺点:这种方法只是让文本在落在浏览器中央,而并非在某个特定区域的中间。

    代码:
    <div style="position:absolute; top:40%; left:40%; width:20%; height:20%">
    本博客用于记录网站开发的点点滴滴。包括网站设计,编程指南,资源和灵感。
    本站的文章大都是原创或者翻译作品。我并不反对转载,因为互联网本来就是用来共享资源的。
    但是当你引用我的文章时,请注明出处。谢谢!
    </div>

     

    4、由于上面的三种方法都存在缺点,因此它们往往不是你所想要的方案。在实际运用中,你可能需要在让多行文本在一个特定高度的区域内垂直居中。当以上三种方法都行不通的情况下,请试试下面要介绍的CSS文本居中的最终方案!其实最终方案并不复杂,有点麻烦的是浏览器的兼容性问题。因此,我们必须创建2套CSS样式方案:

    .outer {
      display:table; width:578px; overflow:hidden; 
      background: #eee; height: 42px;
    }
    .middle {display:table-cell; vertical-align:middle; margin-left 10px;} 
    /*下面的CSS是针对IE7,IE6*/
    <!--[if lte IE 7]>
    <style>
    .outer{position:relative;}
    .middle{position: absolute; top: 50%;}
    .inner{position: relative; top:-50%}
    </style>
    <![endif]-->
    这里我们需要定义三个DIV:
    外层(outer) 可以根据需要定义高度、宽度,但是display必须为table。 
    中间层(middle) 可以有特定的CSS样式,例如:margin-left,但是display必须为table-cell,vertical-align必须为middle。 
    内层(inner) 主要是用来对付IE6和IE7的(注意:IE8支持table-cell居中,所以无需hack)。 
    有了上面的CSS,HTML代码可以这么写:

    <div class="outer">
      <div class="middle">
        <div class="inner">
          把你要居中的文本放在这里
          这是第二行
          ...
        </div>
      </div>
    </div>

    展开全文
  • 在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中的确是有vertical-align属性...

    在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS

    Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中的确是有vertical-align属性,但是它只对(X)HTML元素中拥有valign特性的元素才生

    效,例如表格元素中的<td>、<th>、<caption>等,而像<div>、<span>这样的元素是没有valign特性的,因此使用vertical-align对它们不起

    作用。 

        相关教程:div水平居中的N种方法

        一、单行垂直居中

        如果一个容器中只有一行文字,对它实现居中相对比较简单,我们只需要设置它的实际高度height和所在行的高度line-height相等即可。

    如: 

    div {   
            height:25px;   
            line-height:25px;   
            overflow:hidden;   
     }   
        这段代码很简,后面使用overflow:hidden的设置是为了防止内容超出容器或者产生自动换行,这样就达不到垂直居中效果了。更多CSS教

    程。 

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
     <head>
      <title> 单行文字实现垂直居中 </title>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <style type="text/css">
     body { font-size:12px;font-family:tahoma;}
     div {
      height:25px;
      line-height:25px;
      border:1px solid #FF0099;
      background-color:#FFCCFF;
     }
      </style>
     </head>
     <body>
      <div>现在我们要使这段文字垂直居中显示!</div>
     </body>
    </html>

    二、多行未知高度文字的垂直居中

        如果一段内容,它的高度是可变的那么我们就可以使用上一节讲到的实现水平居中时使用到的最后一种方法,就是设定Padding,使上下的

    padding值相同即可。同样的,这也是一种“看起来”的垂直居中方式,它只不过是使文字把<div>完全填充的一种访求而已。可以使用类似下

    面的代码: 

    div {   
     padding:25px;   
    }   
        这种方法的优点就是它可以在任何浏览器上运行,并且代码很简单,只不过这种方法应用的前提就是容器的高度必须是可伸缩的。 

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
     <head>
      <title> 多行文字实现垂直居中 </title>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <style type="text/css">
     body { font-size:12px;font-family:tahoma;}
     div {
      padding:25px;
      border:1px solid #FF0099;
      background-color:#FFCCFF;
      width:760px;
     }
      </style>
     </head>
     <body>
      <div><pre>现在我们要使这段文字垂直居中显示!
       div {
      padding:25px;
      border:1px solid #FF0099;
      background-color:#FFCCFF;
     }
    </pre></div>


     </body>
    </html>
    三、多行文本固定高度的居中

        在本文的一开始,我们已经说过CSS中的vertical-align属性只会对拥有valign特性的(X)HTML标签起作用,但是在CSS中还有一个display

    属性能够模拟<table>,所以我们可以使用这个属性来让<div>模拟<table>就可以使用vertical-align了。注意,display:table和

    display:table-cell的使用方法,前者必须设置在父元素上,后者必须设置在子元素上,因此我们要为需要定位的文本再增加一个<div>元素:

     

    div#wrap {   
        height:400px;   
     display:table;   
    }   
    div#content {   
      vertical-align:middle;   
        display:table-cell;   
       border:1px solid #FF0099;   
     background-color:#FFCCFF;   
     width:760px;   
    }  

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
     <head>
      <title> 多行文字实现垂直居中 </title>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <style type="text/css">
     body { font-size:12px;font-family:tahoma;}
     div#wrap {
      height:400px;
      display:table;
     }
     div#content {
      vertical-align:middle;
      display:table-cell;
      border:1px solid #FF0099;
      background-color:#FFCCFF;
      width:760px;
     }
      </style>
     </head>
     <body>
     <div id="wrap">
      <div id="content"><pre>现在我们要使这段文字垂直居中显示! Webjx.Com 
     div#wrap {
      height:400px;
      display:table;
     }
     div#content {
      vertical-align:middle;
      display:table-cell;
      border:1px solid #FF0099;
      background-color:#FFCCFF;
      width:760px;
     }
    </pre></div>
    </div>
     </body>
    </html>
        这个方法应该是很理想了,但是不幸的是Internet Explorer 6 并不能正确地理解display:table和display:table-cell,因此这种方法在

    Internet Explorer 6及以下的版本中是无效的。嗯,这让人很郁闷!不过我们还其它的办法
     四、在Internet Explorer中的解决方案

        在Internet Explorer 6及以下版本中,在高度的计算上存在着缺陷的。在Internet Explorer 6中对父元素进行定位后,如果再对子元素

    进行百分比计算时,计算的基础似乎是有继承性的(如果定位的数值是绝对数值没有这个问题,但是使用百分比计算的基础将不再是该元素的

    高度,而从父元素继承来的定位高度)。例如,我们有下面这样一个(X)HTML代码段: 

    <div id="wrap">  
     <div id="subwrap">  
       <div id="content">  
     </div>  
    </div>
    </div>
        如果我们对subwrap进行了绝对定位,那么content也会继承了这个这个属性,虽然它不会在页面中马上显示出来,但是如果再对content进

    行相对定位的时候,你使用的100%分比将不再是content原有的高度。例如,我们设定了subwrap的position为40%,我们如果想使content的上

    边缘和wrap重合的话就必须设置top:-80%;那么,如果我们设定subwrap的top:50%的话,我们必须使用100%才能使content回到原来的位置上去

    ,但是如果我们把content也设置50%呢?那么它就正好垂直居中了。所以我们可以使用这中方法来实现Internet Explorer 6中的垂直居中: 

    div#wrap {   
        border:1px solid #FF0099;   
     background-color:#FFCCFF;   
     width:760px;   
      height:400px;   
     position:relative;   
    }   
    div#subwrap {   
      position:absolute;   
        border:1px solid #000;   
        top:50%;   
    }   
    div#content {   
        border:1px solid #000;   
        position:relative;   
        top:-50%;   
    }   
        当然,这段代码只能在Internet Exlporer 6等计算存在问题的浏览器中才会有作用。(不过我不解,我查阅了很多文章,不知道是因为出

    处相同还是什么原因,似乎很多人都不愿意去解释Internet Exlporer 6中这这个Bug的原理,我也只是了解了一点皮毛,还要再研究) 

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
     <head>
      <title> 多行文字实现垂直居中 </title>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <style type="text/css">
     body { font-size:12px;font-family:tahoma;}
     div#wrap {
      border:1px solid #FF0099;
      background-color:#FFCCFF;
      width:760px;
      height:400px;
      position:relative;
     }
     div#subwrap {
      position:absolute;
      top:50%;
     }
     div#content {
      position:relative;
      top:-50%;
     }
      </style>
     </head>
     <body> 
     <div id="wrap">
      <div id="subwrap">
       <div id="content"><pre>现在我们要使这段文字垂直居中显示!
     div#wrap {
      border:1px solid #FF0099;
      background-color:#FFCCFF;
      width:760px;
      height:500px;
      position:relative;
     }
     div#subwrap {
      position:absolute;
      border:1px solid #000;
      top:50%;
     }
     div#content {
      border:1px solid #000;
      position:relative;
      top:-50%;
     }</pre>
      </div>
     </div>
    </div>
     </body>
    </html>
    五、完美的解决方案

        那么我们综合上面两种方法就可以得到一个完美的解决方案,不过这要用到CSS hack的知识。对于如果使用CSS Hack来区分浏览器,你可

    以参考这篇“简单CSS hack:区分IE6、IE7、IE8、Firefox、Opera”: 

    div#wrap {   
        display:table;   
        border:1px solid #FF0099;   
     background-color:#FFCCFF;   
     width:760px;   
      height:400px;   
     _position:relative;   
       overflow:hidden;   
    }   
    div#subwrap {   
        vertical-align:middle;   
        display:table-cell;   
       _position:absolute;   
       _top:50%;   
    }   
    div#content {   
       _position:relative;   
       _top:-50%;   
    }   
        至此,一个完美的居中方案就产生了。 

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
     <head>
      <title> 多行文字实现垂直居中 </title>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <style type="text/css">
     body { font-size:12px;font-family:tahoma;}
     div#wrap {
      display:table;
      border:1px solid #FF0099;
      background-color:#FFCCFF;
      width:760px;
      height:400px;
      _position:relative;
      overflow:hidden;
     }
     div#subwrap {
      vertical-align:middle;
      display:table-cell;
      _position:absolute;
      _top:50%;
     }
     div#content { 
      _position:relative;
      _top:-50%;
     }
      </style>
     </head>
     <body>
     <div id="wrap">
      <div id="subwrap">
       <div id="content"><pre>现在我们要使这段文字垂直居中显示!
     div#wrap {
      border:1px solid #FF0099;
      background-color:#FFCCFF;
      width:760px;
      height:500px;
      position:relative;
     }
     div#subwrap {
      position:absolute;
      border:1px solid #000;
      top:50%;
     }
     div#content {
      border:1px solid #000;
      position:relative;
      top:-50%;
     }</pre>
      </div>
     </div>
    </div>
     </body>
    </html>

    展开全文
  • 在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中的确是有vertical-align...

    在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS

    Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中的确是有vertical-align属性,但是它只对(X)HTML元素中拥有valign特性的元素才生

    效,例如表格元素中的<td>、<th>、<caption>等,而像<div>、<span>这样的元素是没有valign特性的,因此使用vertical-align对它们不起

    作用。 

        相关教程:div水平居中的N种方法

        一、单行垂直居中

        如果一个容器中只有一行文字,对它实现居中相对比较简单,我们只需要设置它的实际高度height和所在行的高度line-height相等即可。

    如: 

    div {   
            height:25px;   
            line-height:25px;   
            overflow:hidden;   
     }   
        这段代码很简,后面使用overflow:hidden的设置是为了防止内容超出容器或者产生自动换行,这样就达不到垂直居中效果了。更多CSS教

    程。 

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
     <head>
      <title> 单行文字实现垂直居中 </title>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <style type="text/css">
     body { font-size:12px;font-family:tahoma;}
     div {
      height:25px;
      line-height:25px;
      border:1px solid #FF0099;
      background-color:#FFCCFF;
     }
      </style>
     </head>
     <body>
      <div>现在我们要使这段文字垂直居中显示!</div>
     </body>
    </html>

    二、多行未知高度文字的垂直居中

        如果一段内容,它的高度是可变的那么我们就可以使用上一节讲到的实现水平居中时使用到的最后一种方法,就是设定Padding,使上下的

    padding值相同即可。同样的,这也是一种“看起来”的垂直居中方式,它只不过是使文字把<div>完全填充的一种访求而已。可以使用类似下

    面的代码: 

    div {   
     padding:25px;   
    }   
        这种方法的优点就是它可以在任何浏览器上运行,并且代码很简单,只不过这种方法应用的前提就是容器的高度必须是可伸缩的。 

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
     <head>
      <title> 多行文字实现垂直居中 </title>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <style type="text/css">
     body { font-size:12px;font-family:tahoma;}
     div {
      padding:25px;
      border:1px solid #FF0099;
      background-color:#FFCCFF;
      width:760px;
     }
      </style>
     </head>
     <body>
      <div><pre>现在我们要使这段文字垂直居中显示!
       div {
      padding:25px;
      border:1px solid #FF0099;
      background-color:#FFCCFF;
     }
    </pre></div>


     </body>
    </html>
    三、多行文本固定高度的居中

        在本文的一开始,我们已经说过CSS中的vertical-align属性只会对拥有valign特性的(X)HTML标签起作用,但是在CSS中还有一个display

    属性能够模拟<table>,所以我们可以使用这个属性来让<div>模拟<table>就可以使用vertical-align了。注意,display:table和

    display:table-cell的使用方法,前者必须设置在父元素上,后者必须设置在子元素上,因此我们要为需要定位的文本再增加一个<div>元素:

     

    div#wrap {   
        height:400px;   
     display:table;   
    }   
    div#content {   
      vertical-align:middle;   
        display:table-cell;   
       border:1px solid #FF0099;   
     background-color:#FFCCFF;   
     width:760px;   
    }  

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
     <head>
      <title> 多行文字实现垂直居中 </title>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <style type="text/css">
     body { font-size:12px;font-family:tahoma;}
     div#wrap {
      height:400px;
      display:table;
     }
     div#content {
      vertical-align:middle;
      display:table-cell;
      border:1px solid #FF0099;
      background-color:#FFCCFF;
      width:760px;
     }
      </style>
     </head>
     <body>
     <div id="wrap">
      <div id="content"><pre>现在我们要使这段文字垂直居中显示! Webjx.Com 
     div#wrap {
      height:400px;
      display:table;
     }
     div#content {
      vertical-align:middle;
      display:table-cell;
      border:1px solid #FF0099;
      background-color:#FFCCFF;
      width:760px;
     }
    </pre></div>
    </div>
     </body>
    </html>
        这个方法应该是很理想了,但是不幸的是Internet Explorer 6 并不能正确地理解display:table和display:table-cell,因此这种方法在

    Internet Explorer 6及以下的版本中是无效的。嗯,这让人很郁闷!不过我们还其它的办法
     四、在Internet Explorer中的解决方案

        在Internet Explorer 6及以下版本中,在高度的计算上存在着缺陷的。在Internet Explorer 6中对父元素进行定位后,如果再对子元素

    进行百分比计算时,计算的基础似乎是有继承性的(如果定位的数值是绝对数值没有这个问题,但是使用百分比计算的基础将不再是该元素的

    高度,而从父元素继承来的定位高度)。例如,我们有下面这样一个(X)HTML代码段: 

    <div id="wrap">  
     <div id="subwrap">  
       <div id="content">  
     </div>  
    </div>
    </div>
        如果我们对subwrap进行了绝对定位,那么content也会继承了这个这个属性,虽然它不会在页面中马上显示出来,但是如果再对content进

    行相对定位的时候,你使用的100%分比将不再是content原有的高度。例如,我们设定了subwrap的position为40%,我们如果想使content的上

    边缘和wrap重合的话就必须设置top:-80%;那么,如果我们设定subwrap的top:50%的话,我们必须使用100%才能使content回到原来的位置上去

    ,但是如果我们把content也设置50%呢?那么它就正好垂直居中了。所以我们可以使用这中方法来实现Internet Explorer 6中的垂直居中: 

    div#wrap {   
        border:1px solid #FF0099;   
     background-color:#FFCCFF;   
     width:760px;   
      height:400px;   
     position:relative;   
    }   
    div#subwrap {   
      position:absolute;   
        border:1px solid #000;   
        top:50%;   
    }   
    div#content {   
        border:1px solid #000;   
        position:relative;   
        top:-50%;   
    }   
        当然,这段代码只能在Internet Exlporer 6等计算存在问题的浏览器中才会有作用。(不过我不解,我查阅了很多文章,不知道是因为出

    处相同还是什么原因,似乎很多人都不愿意去解释Internet Exlporer 6中这这个Bug的原理,我也只是了解了一点皮毛,还要再研究) 

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
     <head>
      <title> 多行文字实现垂直居中 </title>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <style type="text/css">
     body { font-size:12px;font-family:tahoma;}
     div#wrap {
      border:1px solid #FF0099;
      background-color:#FFCCFF;
      width:760px;
      height:400px;
      position:relative;
     }
     div#subwrap {
      position:absolute;
      top:50%;
     }
     div#content {
      position:relative;
      top:-50%;
     }
      </style>
     </head>
     <body> 
     <div id="wrap">
      <div id="subwrap">
       <div id="content"><pre>现在我们要使这段文字垂直居中显示!
     div#wrap {
      border:1px solid #FF0099;
      background-color:#FFCCFF;
      width:760px;
      height:500px;
      position:relative;
     }
     div#subwrap {
      position:absolute;
      border:1px solid #000;
      top:50%;
     }
     div#content {
      border:1px solid #000;
      position:relative;
      top:-50%;
     }</pre>
      </div>
     </div>
    </div>
     </body>
    </html>
    五、完美的解决方案

        那么我们综合上面两种方法就可以得到一个完美的解决方案,不过这要用到CSS hack的知识。对于如果使用CSS Hack来区分浏览器,你可

    以参考这篇“简单CSS hack:区分IE6、IE7、IE8、Firefox、Opera”: 

    div#wrap {   
        display:table;   
        border:1px solid #FF0099;   
     background-color:#FFCCFF;   
     width:760px;   
      height:400px;   
     _position:relative;   
       overflow:hidden;   
    }   
    div#subwrap {   
        vertical-align:middle;   
        display:table-cell;   
       _position:absolute;   
       _top:50%;   
    }   
    div#content {   
       _position:relative;   
       _top:-50%;   
    }   
        至此,一个完美的居中方案就产生了。 

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
     <head>
      <title> 多行文字实现垂直居中 </title>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <style type="text/css">
     body { font-size:12px;font-family:tahoma;}
     div#wrap {
      display:table;
      border:1px solid #FF0099;
      background-color:#FFCCFF;
      width:760px;
      height:400px;
      _position:relative;
      overflow:hidden;
     }
     div#subwrap {
      vertical-align:middle;
      display:table-cell;
      _position:absolute;
      _top:50%;
     }
     div#content { 
      _position:relative;
      _top:-50%;
     }
      </style>
     </head>
     <body>
     <div id="wrap">
      <div id="subwrap">
       <div id="content"><pre>现在我们要使这段文字垂直居中显示!
     div#wrap {
      border:1px solid #FF0099;
      background-color:#FFCCFF;
      width:760px;
      height:500px;
      position:relative;
     }
     div#subwrap {
      position:absolute;
      border:1px solid #000;
      top:50%;
     }
     div#content {
      border:1px solid #000;
      position:relative;
      top:-50%;
     }</pre>
      </div>
     </div>
    </div>
     </body>
    </html>

    展开全文
  • 在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中的确是有vertical-align属性...
  • 多行文本垂直居中的CSS需要这么设置: 复制代码代码如下: /*多行居中对齐的方法,width,height必须使用px单位,再配合vertial-align:middle和display:table-cell属性,且div不能浮动*/ .vcenter { width: 100px; ...
  • 针对学员疑问“div垂直居中?”引出的“CSS元素垂直居中一系列方法的探究”的针对性课程,课程包含两方面:1、文本垂直居中的解决方案;2、块级元素垂直居中的解决方案。
  • 我们在通常情况下都需要进行垂直水平居中的一个样式处理,在垂直水平居中方面,这里给出了一种关于div及内部文本内容的一个垂直水平居中显示 <!DOCTYPE html> <html lang="en"> <head> <meta ...
  • 这是比较简单的方法,不仅能实现绝对居中的效果,也支持联合可变高度方式使用。内容块定义transform: translate(-50%,-50%) 必须加上top: 50%; left: 50%。但是不兼容IE8以及以下,可能干扰其他transform效果,某些...
  • 主要为大家详细介绍了CSS教程之div垂直居中的多种方法,还包括多行文本垂直居中的方法,感兴趣的小伙伴们可以参考一下
  • div垂直居中的方法

    2019-11-08 17:07:23
    本文收集了六种利用css进行元素的垂直居中的方法,每一种适用于不同的情况,在实际的使用过程中选择某一种方法即可。 Line-Height Method 试用:单行文本垂直居中,demo 代码: html ...
  • HTML中实现多文本垂直居中的方法 方法一:父元素使用display:table和子元素使用display:table-cell属性来模拟表格 子元素设置vertical-align:middle即可垂直居中 <div class="box table"> <span class=...
  • CSS多行文本垂直居中的方法

    千次阅读 2013-12-07 09:01:30
    单行文本居中比较简单,就是将line-height设置...多行文本垂直居中的CSS需要这么设置: /*多行居中对齐的方法,width,height必须使用px单位,再配合vertial-align:middle和display:table-cell属性,且div不能浮动*/
  • 在样式布局中,我们经常碰到需要将元素居中。...要实现元素的垂直居中,有人会想到css中vertical-align属性,但是它只对拥有valign特性元素才生效,例如表格元素中、、等,而像、这样元素是没有v...
  • 主要介绍了CSS文本和div垂直居中方法总结,包括多行文本垂直居中,单行文本垂直居中,子div垂直居中,感兴趣小伙伴们可以参考一下
  • 1、text-align:center实现图片水平居中text-align一般用于文本的水平居中,也可以用于图片,代码如下:CSS部分:div{text-align:center;width:500px;border:greensolid1px;}HTML部分:效果图:图片垂直居中1.jpg2、...
  • 一、单行文本居中 1.文字水平居中 <div class='box' style="text-align: center;">hello world</div> ...2.文本垂直水平居中 ...二、多行文本的垂直居中 通过verticle-align:middle实现CS.
  • css 文本和div垂直居中方法汇总

    万次阅读 多人点赞 2016-07-04 14:10:07
    本文总结了垂直居中的各种方法,包括单行文本垂直居中、多行文本垂直居中以及div垂直居中,列出了多种情况对应的方法。读者可以根据实际需要选择合适的方法
  • 一、根据子容器div大小设置偏移量使其垂直居中发布 1、方法:一先设置其水平和垂直偏移量分别为父级元素50%(left/top) 二根据其本身大小将其向左向上移动一半大小(margin-left/margin-top) html代码部分: ...
  • 多行文本垂直居中的三种方法

    万次阅读 2018-03-23 11:56:13
    本篇是我整理的多行文本垂直居中的三种方法效果图如下图方法一:父元素使用display:table和子元素使用display:table-cell属性来模拟表格,子元素设置vertical-align:middle即可垂直居中&lt;div class="span...
  • 针对学员疑问“div垂直居中?”引出的“CSS元素垂直居中一系列方法的探究”的针对性课程,课程包含两方面:1、文本垂直居中的解决方案;2、块级元素垂直居中的解决方案。...
  • 尽管有CSSvertical-align特性,但是并不能有效解决未知高度的垂直居中问题(在一个DIV标签里有未知高度的文本或图片情况下)。标准浏览器如Mozilla, Opera, Safari等.,可将父级元素显示方式设定为TABLE(display...
  • 实现水平垂直居中的方法 文本(文字)内容属于行内元素 行内元素水平垂直居中方法 方式一: 设置文字外层的盒子 text-align:center /*水平居中*/ height = 100px; /*垂直居中 */ line-height = 100px; 垂直居中...

空空如也

空空如也

1 2 3 4 5 ... 10
收藏数 199
精华内容 79
关键字:

div文本垂直居中的方法