本页二维码,扫一扫分享到朋友圈
朋友圈

CSS垂直居中和水平居中方法


阅读213 评论0 赞 63返回首页    go 编程与技术  go css


1、单行垂直居中


文字在层中垂直居中vertical-align 属性是做不到的.我们这里有个比较巧妙的方法就是:设置height的高度与line-height的高度相同! 

<div style="line-height:500px;height:500;"></div>


2、层水平居中

设置div的宽度小于父div的宽度,设置 margin:0 auto;,即可让div居中。

#parentdiv

{

width: 500px;

}

#childdiv {

width: 200px;

margin:0 auto;

}


3、层中的文字水平居中


在childdiv的css加上text-align:center;

#parentdiv

{

width: 500px;

}

#childdiv {

width: 200px;

margin:0 auto;

text-align:center;

}


4、div层垂直居中


<div style="width:275px;height:375px;border: solid red;">

<div style=" background:green;height: 375px; width: 275px; position: relative; display: table-cell; vertical-align: middle;">

     <div style=" background:red;position:static;position:absolute\9; top: 50%;">

        <div style=" background:blue;position: relative; top: -50%;">

                    sssssssssssssssssssssssssssss         </div>

      </div>

   </div>

</div>


5、div层垂直水平居中,英文超长换行

 

  <div style="float:left;width:275px;height:375px;border: solid red;">

<div style=" height: 375px; width: 275px; position: relative; display: table-cell; vertical-align: middle;">

          <div style="position:static;position:absolute\9; top: 50%;">

           <div style="position: relative; top: -50%; text-align: center;">

              <div style="width: 85px;WORD-WRAP: break-word;TABLE-LAYOUT: fixed;word-break:break-all;margin:0 auto;">

            qqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqq            </div>

                     

              </div>

          </div>

         </div>

</div>


6、div垂直滚动


<div style="width: 160px; height: 260px; overflow-y: scroll; border: 1px solid;">test </div>


7、垂直居中和使用text-align水平居中


<div style="float:left;width:275px;height:375px;border: solid red;">

<div style=" height: 375px; width: 275px; position: relative; display: table-cell; vertical-align: middle;">

          <div style="position:static;position:absolute\9;top: 50%;">

           <div style="position: relative; top: -50%; text-align:center;">

            <div style="width: 275px;">

                      <div style="width: 160px;WORD-WRAP: break-word;TABLE-LAYOUT: fixed;word-break:break-all;text-align:left;">


              </div>

              </div>

                     

              </div>

          </div>

         </div>

</div>


8、垂直居中和使用margin水平居中


    <div style="float:left;width:275px;height:375px;border: solid red;">

<div style=" height: 375px; width: 275px; position: relative; display: table-cell; vertical-align: middle;">

          <div style="position:static;position:absolute\9; top: 50%;">

           <div style="position: relative; top: -50%; ">

            

                      <div style="margin:0 auto;width: 160px;WORD-WRAP: break-word;TABLE-LAYOUT: fixed;word-break:break-all;">

            aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

              </div>

             

                     

              </div>

          </div>

         </div>

</div>


  上一篇:go 兼容各种浏览器的图片垂直居中CSS
  下一篇:go div浮动层绝对居中定位用CSS


评论


用QQ登录管理/创建网站 用微博登录管理/创建网站   发布于:08-24