首页 爱情文章 亲情文章 友情文章 生活随笔 校园文章 经典文章 人生哲理 励志文章 搞笑文章 心情日记
  • 爱情文章
  • 亲情文章
  • 友情文章
  • 生活随笔
  • 校园文章
  • 经典文章
  • 人生哲理
  • 励志文章
  • 搞笑文章
  • 心情日记
  • 英语文章
  • 范文大全
  • 作文大全
  • 新闻阅读
    •
    当前位置: 山茶花美文网 > 心情日记 > 正文

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

    时间：2020-04-27来源：山茶花美文网 本文已影响 人 山茶花美文网手机站

    1、单行垂直居中

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

    div/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

    div

    div

    div

    /div

    /div

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

    div

    div

    div

    div

    div

    /div

    /div

    6、div垂直滚动

    div

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

    div

    div

    div

    div

    div

    div

    设计之家设计之家设计之家设计之家设计之家设计之家设计之家设计之家

    /div

    /div

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

    div

    div

    div

    div

    div

    /div

    /div

    • CSS垂直居中和水平居中方法总结 水平居中和垂直居中 相关文章:
    • 爱情文章
    • 亲情文章
    • 友情文章
    • 随笔
    • 哲理
    • 励志
    • 范文大全

    最新文章

    热点文章

    推荐访问

    军训远足心得体会 军训爬山心得体会 大学军训徒步拉练感想 军训徒步作文 军训徒步10公里感想 军训徒步心得体会 5分钟演讲中秋节节日 中秋一分钟演讲 中秋节演讲稿4分钟 中秋节演讲稿一分钟 中秋节演讲稿五分钟 3-5分钟 中秋节短篇演讲稿 中秋节演讲稿两分钟 中秋节的演讲稿3分钟 关于中秋节的演讲稿三分钟 孩子体验军训的心得 参加孩子军训活动的感受与收获 家长对孩子军训后的收获和感悟 小孩军训的收获与感悟 学生军训的收获与感悟 孩子军训成长过程家长感悟 孩子军训感悟 孩子军训心得体会 孩子军训的收获与感悟 兵役前训练心得体会 部队当兵的心得 新兵役前教育训练心得体会 预备役军训心得体会 新兵军训感悟

    本文CSS垂直居中和水平居中方法总结 水平居中和垂直居中由山茶花美文网整理提供，版权归原作者、原出处所有。

    Copyright © 山茶花美文网 All Rights Reserved.