likes
comments
collection
share

如何玩转css的居中问题--上

作者站长头像
站长
· 阅读数 96

随着知识点的增多，学习的深度加深；我发现自己对css的居中问题一种处于一种模糊的认知。可以说出几种方法，但不全也对这些方法没有清晰的认识；这也导致自己有一段时间，总发现写了居中，却总出现居中不了的情况。于是就有了这一个css居中系列，为大家玩转css的居中提供我个人的建议。

css居中分为三个模块

那么我们如何对css居中有个清晰的认识呢，我大致分为三个大模块；分别为；块级元素，行内元素，行内块。以这三个角度为大家阐述如何准确而有效的实现居中，当然这篇只是个前篇；接下来，也会更flex弹性布局，grid布局的文章。

行内元素

水平居中

面对这一要求，我们可以使用text-align实现水平居中；当然这一属性只对文本有效，对元素无效，不然就会出现写了居中却无效的效果。

如何玩转css的居中问题--上 如果对元素使用，则会出现这种情况

<style>
    div{
        text-align: center;
    }
  .box{
    width: 100px;
    height: 100px;
    border: 1px solid red;
  }
</style>
<body>
    <div>
        <div class="box">

        </div>
    </div>
</body>

如何玩转css的居中问题--上

垂直居中

有水平居中当然有垂直居中了，不过垂直居中就要分情况了。

父元素高度不确定

在父元素高度不确定时，我们将如何为行内元素设置垂直居中呢，在没学后面的知识的情况下，我们只能使用padding内边距来实现了，不过使用这种方法较少。因为他只能实现一个大概的垂直居中。

父元素高度确定

在这个时候，我们就可以用line-height来实现准确的垂直居中了，不过，line-height的值一定要等于父元素的高度。

如何玩转css的居中问题--上

高度确定多行文本居中

在css中还有一个垂直居中属性--vertical-align,这个也可以实现垂直居中，不过限制较多，在不改变父元素的情况下；只有当父元素是td和th的时候才有用。

  .box{
    width: 100px;
    height: 100px;
    border: 1px solid red;
    vertical-align: middle;
  }
</style>
<body>
    <table>
        <tr> <td class="box">
          <span>vertical-align: middle;</span>
        </td></tr>
       
    </table>
</body>

如何玩转css的居中问题--上

块级元素

这个东西我们用的可就多了，这个的方法比行内元素还多。

水平居中

在水平居中中，我们就要分为两种情况。

宽度确定

在宽度确定的情况下，我们可以使用 margin: 0 auto;则可以实现水平居中，在这里0表示上下外边距为0，auto表示左右外边距为自动。

<style>
  .box{
    width: 100px;
    height: 100px;
    border: 1px solid red;
   margin: 0 auto; 
  }
</style>
<body>
    <div class="box">
        margin: 0 auto; 
    </div> 
</body>

如何玩转css的居中问题--上

宽度不确定

在这种情形下，我们有三种方法去解决它，让它居中。

方法一 table

我们可以在我们想要居中的块级元素外套一个table，使块级元素居中；其实table是一个行内块元素，他没有宽度，但他可以被填入的内容撑大；从而也可使用margin: 0 auto;使块级元素居中，方法同上。缺点：就是要加一个无意义的标签，同时也加深了嵌套。

方法二 display: inline;

我们可以通过将块级元素变成行内块元素，在使用text-align:center;让它居中；是不是比较方便，但是他将为使原来的元素失去一些块级元素的作用，功能（宽，高......）。

<style>
    .contain{
        text-align: center;
    }
  .box{
    display: inline;
    border: 1px solid red;
  }
</style>
<body>
    <div class="contain">
        <div class="box">
        margin: 0 auto; 
    </div> 
    </div>
    
</body>

如何玩转css的居中问题--上 注意了，text-align:center;一定要给父元素，不然就无效果了。

方法三 通过相对布局和绝对布局

这个可以和垂直居中写在一起，就和小伙伴们一起说了吧，首先我们在父元素中写一个 position: relative;表示是相对布局，在子元素中填写一个position: absolute;表示是一个绝对布局，这就表示子元素可以布局在父元素的任意地方。

    .contain{
        position: relative;
        width: 300px;
        height: 300px;
        border: 1px solid red;
    }
    .box{
        position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            border: 1px solid red;
    }
</style>
<body>
    <div class="contain">
        <div class="box">
        position: absolute;
    </div></div>
    
</body>

注意了上下的50%的含义是不同的，上面的是：子元素左上角的点移动到父元素宽为50%，高为50%的地方，这就产生了一个问题，这也是居中哇，所以就有了下面的50%；他表示向上移动自身高度的50%，向左移动宽度的50%。 如何玩转css的居中问题--上 当然这个方法在确定宽度的块级元素中也可以用。

垂直居中

块级元素的垂直居中，可以用上一个的方法三，同时也还用一个有兼容性问题的方法，他只支持ie8以上。它就是display: table-cell;使用他来激活块级元素的vertical-align: middle;从而实现垂直居中。

    .contain{
        position: relative;
        display: table-cell;
        width: 300px;
        height: 300px;
        border: 1px solid red;
        vertical-align: middle;
    }
    .box{

            border: 1px solid red;
    }
</style>
<body>
    <div class="contain">
        <div class="box">
        position: absolute;
    </div></div>

如何玩转css的居中问题--上

行内块

这个就是对行内元素和块级元素相互转换，从而使我们可以更加灵活的使用居中。

  1. 转换为块元素：display:block;
  2. 转换为行内元素：display:inline;
  3. 转换为行内块：display: inline-block;

结束语

今天的总结就到这了，希望小伙伴们要动起来，操练起来。下面会为大家总结一番我对flex布局和grid布局的理解。

转载自:https://juejin.cn/post/7149437865426944037
评论
请登录