• 技术文章 >web前端 >css教程

    css怎样设置页面居中

    奋力向前奋力向前2021-09-07 11:14:06原创238

    css设置页面居中的方法:1、“text-align:center”设置水平居中。 2、“dispaly:flex”设置水平居中。3、“display:table-cell”设置垂直居中。4、“position:absolute”设置垂直居中。

    本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

    居中在CSS中用的也比较常见,总结几种自己比较熟悉的居中的写法。当然,肯定还有更多更不错的写法,对于文中不足的地方也欢迎指正。

    假设现在给出这种场景:

    <p class="parent">
      <p class="child">
        DEMO
      </p>
    </p>

    其中在class='child'这个div中的内容长度是不一定的,现在需要实现这个div的居中。

    一、水平居中

    1.1text-align: center

    在块级父容器中让行内元素或者类行内元素居中,只需使用text-align: center
    这种方法可以让inline/inline-block/inline-table/inline/flex居中。

    .child {
      display:inline-block;
      /*子元素文字会继承居中,因此要在上面写上向左边居中*/
      text-align:left;
    }
    .parent {
      text-align:center;
    }

    当有多个child div的时候如果设置display: inline-block的时候需要注意每个div之间会有缝隙,这不是什么bug,特性就是如此。

    如果想去掉这些缝隙的话,有几种解决方法:

    1、去掉HTML中的空格。

    元素之间留白间距出现的原因是因为标签段之间的空隙,这个时候只需要去除掉HTML之间的空隙就好了。

    比如这种写法,当然写法也有很多种,只要保证把空隙去掉就可以了,但是这种方法总觉得写起来有点反人类。

    <p class="parent">
      <p class="child">
      DEMO1</p
      ><p class="child">
      DEMO2</p
      ><p class="child">
      DEMO3</p>
    </p>

    2、使用margin负值

    这种方法这个负的值不太好确定,和上下文的字体等等都有关,这种方法不太适合大规模的使用。

    .child {
      margin-right; -5px;
    }

    3、使用 font-size: 0

    这种方法能十分简单地这个间距问题,只需要将父divfont-size设为0 ,然后记得将子divfont-size属性设置回来即可。

    .parent {
      font-size: 0;
    }
    .chilc {
      font-size: 16px;
    }

    4、使用letter-spacing或者word-spacing

    .parent {
      letter-spacing: -5px;
      /*或者*/
      word-spacing: -5px;
    }
    .chilc {
      letter-spacing: 0;
      /*或者*/
      word-spacing: 0;
    }

    1.2 dispaly: flex

    只兼容IE10+

    .parent {
      display:flex;
      justify-content:center;
    }
    /*或者*/
    .child{
      margin:0 auto;
    }

    二、垂直居中

    1.1display: table-cell

    可以使高度不同的元素都垂直居中

    .parent {
      display:table-cell;
      vertical-align:middle;
    }

    2.2 position: absolute

    .parent {
      position:relative;
    }
    .child{
      position:absolute;
      top:50%;   /* 参照物是父容器 */
      transform:translateY(-50%); /*百分比的参照物是自身 */

    推荐学习:CSS视频教程

    以上就是css怎样设置页面居中的详细内容,更多请关注php中文网其它相关文章!

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    专题推荐:css 居中
    上一篇:一招教你使用css3制作按钮添加动态效果(代码分享) 下一篇:html中css代码可以放在哪里
    线上培训班

    相关文章推荐

    • 如何实现CSS居中??CSS居中常用方法_html/css_WEB-ITnose• CSS居中布局总结• CSS居中:最全面的CSS居中方法大全• css居中代码是什么• css居中对齐怎么设置

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网