zoukankan      html  css  js  c++  java
  • 实现居中的几种方法

    在开发的过程中,很多时候我们需要实现居中,所以记录一下几种居中的方法。

    水平居中

    text-align: center;

    text-align: center 居中是只针对行内元素的,例如 span、a、img、input 、text 等行内元素。

    我们有这样的 HTML 结构:

    <div class="parent">
      <span>inline element</span>
    </div>
    

    行内居中只需要给父元素设置 text-align: center 就可以实现。

    .parent {
      text-align: center;
       200px;
      height: 50px;
      border: 1px solid red;
    }
    

    注意:对于元素中的块级元素它是不起作用的。但是可以把块级元素的 display 设置为 inline-block 或者 inline 之后,也是可以生效的,但是需要注意设置 inline 之后是会丢失一些功能的,比如设置元素的宽高。

    margin: 0 auto;

    通过给自身设置 margin: 0 auto 可以实现对块级元素的居中。例如:

    <div class="parent">
      <div class="chilren"></div>
    </div>
    
    .parent {
       100%;
      border: 1px solid red;
    }
    .chilren {
      margin: 0 auto;
       20px;
      height: 20px;
      background: red;
    }
    

    text-align: center 一样,它也可以改变行内元素的 displayinline-block 来实现行内元素的居中。

    positon: absolute;

    使用 absolute 也是可以实现居中的。但是使用它之后,子元素就不能把父元素撑起来了。需要自己确定父元素的大小。

    <div class="parent">
      <div class="chilren"></div>
    </div>
    
    .parent {
      position: relative;
       200px;
      height: 50px;
      border: 1px solid red;
    }
    .chilren {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
       50px;
      height: 50px;
      background: red;
    }
    

    首先给父元素添加 position: relative 这样子元素就可以通过父元素来实现绝对定位。然后让元素向右偏移 50%,需要注意,这个时候居中的是子元素的左边线。所以这时候就需要使用 transilateX(-50%) 让元素再相对自己向右位移 50%,这样就能完美实现居中啦。(这个方法在垂直居中的时候同样适用)

    display: flex;

    使用弹性布局也可以很方便的实现水平居中(和垂直居中)。

    看下例子:

    <div class="parent">
      <div class="chilren"></div>
    </div>
    
    .parent {
      display: flex;
      justify-content: center;
       200px;
      height: 50px;
      border: 1px solid red;
    }
    
    .chilren {
      left: 50%;
       50px;
      height: 50px;
      background: red;
    }
    

    用 flex 来实现居中真的很方便,也是网页布局的一大利器~好用的不得了。对于 flex 不了解的,可以参考阮一峰老师的这篇文章:Flex 布局教程:语法篇

    垂直居中

    positon: absolute; 和 display: flex;

    这两个方法用来实现垂直居中也是非常方便的。

    positon: absolute;

    通过决定定位实现垂直居中的方法和实现水平居中基本没什么两样,只需要向下偏移 50%,然后相对自身向上偏移 50% 就可以了。看代码:

    <div class="parent">
      <div class="chilren"></div>
    </div>
    
    .parent {
      position: relative;
       200px;
      height: 200px;
      border: 1px solid red;
    }
    .chilren {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate3d(-50%, -50%, 0);
       50px;
      height: 50px;
      background: red;
    }
    

    这边使用了 translate3d 这个属性,三个值分别对应了 x、y、z 轴方向的位移。这样我们就完美的实现元素的居中啦~

    margin-top: 50%;

    根据绝对定位实现居中,也可以联想到使用 margin-top: 50%transform: translateY(-50%) 来实现垂直居中,道理是差不多的。代码就不放了,相信会使用绝对定位实现居中的就会这个啦。

    display: flex;

    这个很简单,直接看代码吧。看过阮一峰老师文章就懂了,写的很详细,我就不多赘述了。

    <div class="parent">
      <div class="chilren"></div>
    </div>
    
    .parent {
      display: flex;
      justify-content: center;
      align-items: center;
       200px;
      height: 50px;
      border: 1px solid red;
    }
    
    .chilren {
      left: 50%;
       50px;
      height: 50px;
      background: red;
    }
    

    line-height 实现文字的垂直居中

    因为行高的垂直居中性,所以在行内的元素都是会居中的。那么使用 line-height 等于父元素高度也可以实现元素的居中。

    <div class="parent">
      <div class="chilren">啦啦啦,line-height</div>
    </div>
    
    .parent {
      display: flex;
      justify-content: center;
      align-items: center;
       200px;
      height: 200px;
      border: 1px solid red;
    }
    .chilren {
      line-height: 200px;
    }
    

    这个方法在实现文字垂直居中的时候是非常方便的。

    暂时就先记录这么多常用的居中方法,以后有其他好用的方法的话会进行补充。

  • 相关阅读:
    int、bigint、smallint 和 tinyint
    SQL Server 2005中修改 Server Collation的方法
    BCP 数据导入问题 Unix系统中的文本文件换行符引发的问题
    如何在不提升用户权限的情况下,使普通用户执行xp_cmdshell存储过程
    【转】分析SQL Server计划缓存
    很多年过去了
    SQL日志收缩
    【转】sql server 测试中一些常看的指标和清除缓存的方法
    反射相关
    js获取UserControl内容,避免拼html的麻烦
  • 原文地址:https://www.cnblogs.com/cccj/p/8919967.html
Copyright © 2011-2022 走看看