总结的一些 CSS 居中的方法

  • 2016-10-31
  • 11
  • 0

从事前端开发以来,对于 css 居中的代码可以说写过无数遍了,在平时的工作和学习中也常有小学弟小学妹亦或是同事来问我,这个盒子怎么居中,这个行内元素,块状元素怎么居中啊,在 table 里有怎么居中啊,垂直方向和竖直方向又怎么居中啊,等等问题。

说实话,虽然我能够解决绝大部分的居中问题,但是对于每种情况的居中方法我分的也不是很清楚,往往都是要好几种方法都试着写一遍来挑选最合适的那种。

这篇博客是结合我的工作笔记和网上的一些相关文章把居中的知识做个总结~。。~

什么是居中

居中故名思意就是将物体放置在其容器的中间,在css中居中就是指元素、文本、图片等相对其容器或父元素或浏览器窗口能够居中显示。而根据显示方式的不同,又分为水平居中,垂直居中,水平垂直居中。下面就分情况对居中进行讨论。

一、水平居中

水平居中我们常见的一种解决方案就是设置 text-align:center,然而我们会发现这种方式有时候有效,有时候却没有效果。这是因为我们在使用相关方法的时候并没有对块级元素和行内元素进行区分,不同类型的元素其居中方法是不同的:

当元素为行内元素时(如文本,链接)

当需要居中的元素为行内元素时,你可以通过在其父元素(必须是块级元素)设置如下css样式:

.parent {
     text-align:center;
}

这种方法对 display 为 inline、inline-block、inline-table、inline-flex 的元素的居中都有效。

块级元素居中

对于一个块级元素(宽度 width 已定)你可以通过设置其 margin 属性,来达到水平居中的效果。你可以将其 margin-left 和 margin-right 设置为 auto:

.center{
    width: **px; //宽度是确定的
    margin:0 auto;
}

这样浏览器就会根据元素的宽度自动为元素左右两边设定等宽的 margin ,来达到水平居中的效果。这里需要注意的是元素需要设定 width 属性,否则元素的宽度会自动充满父元素,就不存在相对父元素水平居中一说了。
这里需要注意的是这种方法对设置float属性的块级元素是没有效果的。

当有多个块级元素时

当你需要对多个块级元素进行居中显示时,如果块级元素如下垂直排列:

那只要简单的设置 margin:0 auto; 就可以轻松实现居中了。

但如果如下横向排列时:

那么就可以使用 display:inline-block 将多个块元素单行显示,同时由于 inline 的缘故,可以在父元素设置 text-align:center 将多个块元素居中,当然也可以将元素设置为 display:flex; justify-content: center;达到居中效果。

二、垂直居中

垂直居中相比于水平居中,就复杂一些,还是分块级与行内进行讨论。

inline或inline-block元素

单行垂直居中的情况

  1. 当父元素没有设定宽度,而是根据内容自适应时,简单的设置padding就可以达到垂直居中的效果,如:
    div { 
       border: 1px solid #666; 
       padding: 60px; 
       text-align:center;
    }
    a{
       background-color: #f5f5f5;
       color: #606060;
       border: 1px solid #aaa;
       padding: 20px;  /*相同的上下内距实现垂直居中*/
    }
    <div>
      <a href="#">我是一个 a 链接</a>
    </div>
    
  2. 在某些情况下设置padding并不能满足需求,而你又需要将一段单行显示的文本居中,这时你可以将line-height和height属性设置为等高来达到目的:
    div {
       height:60px;
       border:solid 1px #666;
       text-align:center;
    }
    a {
      line-height:60px;
    }
    

多行垂直居中

  1. 设置 padding 同样可以使多行文本居中,但有时当文本出现在表格单元格里或其他情况也会使该方法无效,这时会用到 vertical-align 属性。

    需要指出的是只有一个元素属于inline或是inline-block(table-cell也可以理解为inline-block水平)水平,其身上的vertical-align属性才会起作用。
    (inline-block 元素我试过好像不行,不知道是不是打开姿势不正确,后面还得再研究一下~)

    div {
       display:table-cell;
       height:60px;
       width:600px;
       border:solid 1px #666;
       text-align:center;
       vertical-align:middle;
    }
    
  2. 如果上述方法不行,可以试一下 flex-parent, 一个 flex-child 可以很轻易的在flex-parent里垂直居中:
    div {
      display: flex;
      justify-content: center;
      flex-direction: column;
      height: 60px;
      border:solid 1px #666;
    }
    
  3. 如果上述2中方法都不可行,你就需要借助伪元素,也就是在父容器里添加一个高度占满整个父元素的伪元素,文本就居中显示在里面。
    .ghost{
      position: relative;
      border:solid 1px #666;
      padding:10px;
      height:80px;
    }
    .ghost::before {
      content: " ";
      display: inline-block;
      height: 100%;
      width: 1%;
      vertical-align: middle;
    }
    .ghost p {
      display: inline-block;
      vertical-align: middle;
    }
    

    我是段 P 文本

块级元素垂直居中

  1. 当你知道元素的高度时
    如果你知道元素的高度,那么你可以这样实现垂直居中:

    .parent {
      position: relative;
      height:100px;
      border:solid 1px #666;
    }
    .child {
      position: absolute;
      top: 50%;
      left: 50%;
      height: 50px;
      width: 400px;
      margin-top: -55px;
      margin-left: -200px;
      border:solid 1px #aaa;
      background:#f5f5f5;
    }
    

    我是段高度为 50px 宽为 200px 的 P 文本

    上述代码是通过定位的方式,来实现垂直居中,子元素参照父元素进行绝对定位,相对于父元素的上边缘向下移动50%(父元素高度的50%),然后通过margin-top元素将子元素向上拉自身的50%,达到最终的居中。

  2. 当元素的高度未知时
    当元素高度未知时可以如下,本质原理与上述相似:

    .parent {
      position: relative;
      height:100px;
      border:solid 1px #666;
    }
    .child {
      position: absolute;
      top: 50%;
      transform: translateY(-50%); //向 Y 轴平移 50%*height 的距离;
    }
    

    我是段高度为 50px 宽为 200px 的 P 文本

  3. 使用flexbox
    .parent {
      display: flex;
      flex-direction: column;
      justify-content: center;
      height:100px;
      border:solid 1px #666;
    }
    

    我是段高度为 50px 宽为 200px 的 P 文本

三、水平垂直居中

你可以将上述方法进行合理的组合,来达到水平垂直居中,总结一下,可分为如下三种情况:

  1. 元素是否具有固定的宽高
    在通过将元素定位 50% / 50% 后,再设置一个高度和宽度一半大小的负值给 margin,能够很好的居中,并且支持大多数浏览器:

    .parent {
      position: relative;
      height: 500px;
      border: solid 1px #666;
    }
    
    .child {
      width: 300px;
      height: 100px;
    
      position: absolute;
      top: 50%;
      left: 50%;
    
      margin: -50px 0 0 -150px;
    }
    
  2. 当宽高未知时
    当你不知道宽高时,你可以使用 transform 属性,设置 translate(-50%) ,这里的 50% 是相对与元素本身的宽高。

    .parent {
      position: relative;
    }
    .child {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    
  3. 使用flexbox
    不用管是否有确定的宽高,想要水平垂直居中,你需要设置两个居中属性:

    .parent {
      display: flex;
      justify-content: center;
      align-items: center;
    }
    

评论

还没有任何评论,你来说两句吧