从一个待办应用“入门”前端开发-元素居中

慕尘
597 阅读4分钟

在网页编写的时候经常需要对一个元素进行居中处理，那么接下来，我为大家介绍几种居中处理的方式。

1. 元素居中

一般元素居中分为以下几个方面：

  • 文本居中/行内元素/行内块元素水平、垂直居中
  • 多行文本水平垂直居中
  • 知道需要水平、垂直居中元素宽高
  • 无法知道需要水平、垂直居中元素宽高

1.1 文本居中/行内元素/行内块元素水平、垂直居中

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>文本水平垂直居中</title>
    <style>
      .outer-wrapper {
        width: 500px;
        line-height: 50px; /* 利用行高居中 */
        background: chocolate;
        text-align: center; /* 文本居中 */
      }
    </style>
  </head>
  <body>
    <div class="outer-wrapper">我需要居中～～～</div>
  </body>
</html>

image.png

总结：利用text-align实现水平上的居中，利用line-height行高设置垂直方向的居中。

缺点：无法支持多行文本的居中。

1.2 多行文本水平垂直居中

多行文本的水平居中的思路就是在多行文本外面加一个行内块元素，使其将多行文本包裹。接下来再按照单行文本水平垂直居中的方式处理。同时还需要给行内块元素添加line-height\text-align\vertical-align。

那么什么是行内块元素呢？又怎么添加行内块元素？行内块元素结合了行内元素和块级元素的特点。行内块元素不占一行，只是内容大小，但是行内块元素可以设置宽高。那么，怎么加入一个行内块元素呢？这里，我们可以通过添加span标签，再通过CSS中的display属性将span标签变成行内块元素。display: inline-block;。display属性不仅可以将一个元素变成行内块、也可以将一个元素变成块级元素以及行内元素。分别是将display设置成 block、inline-block

span {
    display: inline-block;
}

实现多行文本的居中。代码如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>文本水平垂直居中</title>
    <style>
      .outer-wrapper {
        width: 500px;
        line-height: 150px; /* 利用行高居中 */
        background: #333;
        text-align: center; /* 文本居中 */
      }
      .inter-wrapper {
        display: inline-block;
        width: 400px;
        line-height: 20px;
        text-align: left;
        vertical-align: middle;
        background: cornflowerblue;
      }
    </style>
  </head>
  <body>
    <div class="outer-wrapper">
      <span class="inter-wrapper">
        我需要居中～～～我需要居中～～～我需要居中～～～我需要居中～～～我需要居中～～～我需要居中～～～我需要居中～～～我需要居中～～～我需要居中～～～我需要居中～～～
      </span>
    </div>
  </body>
</html>

我们功能确实实现了，可为什么需要设置line-height\text-align\vertical-align呢？首先，我们先不设置看看效果。我们可以使用/** **/注释一段代码。

<style>
  .outer-wrapper {
    width: 500px;
    line-height: 150px; /* 利用行高居中 */
    background: #333;
    text-align: center; /* 文本居中 */
  }
  .inter-wrapper {
    display: inline-block;
    width: 400px;
    /** line-height: 20px;
    text-align: left;
    vertical-align: middle; **/
    background: cornflowerblue;
  }
</style>

已经注释的样式

image.png

未注释的样式

image.png

为什么会这个样子呢？因为，CSS样式是可以被继承的，子元素可以继承父元素的某些样式的。而这里的line-height、text-align都会被继承到子元素inter-wrapper上面。所以，我们需要重新设置子元素inter-wrapper的line-height、text-align属性。

1.3 知道需要水平、垂直居中元素宽高

如果我们只是需要水平居中，我们就可以通过margin: 0 auto;的方式去居中元素。代码如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>水平垂直居中</title>
    <style>
      .outer-wrapper {
        width: 500px;
        line-height: 50px; /* 利用行高居中 */
        background: chocolate;
        margin: 0 auto;
        text-align: center; /* 文本居中 */
      }
    </style>
  </head>
  <body>
    <div class="outer-wrapper">我需要居中～～～</div>
  </body>
</html>

image.png 如果我们即需要水平也需要垂直居中，可以通过以下三种方式：

  • position(定位) + margin的方式去居中。
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>水平垂直居中</title>
    <style>
      .outer-wrapper {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 500px;
        height: 300px;
        margin-left: -250px;
        margin-top: -150px;
        background: chocolate;
      }
    </style>
  </head>
  <body>
    <div class="outer-wrapper">我需要居中～～～</div>
  </body>
</html>

image.png

  • position(定位) + margin的方式去居中。
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>水平垂直居中</title>
    <style>
      .outer-wrapper {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
        width: 500px;
        height: 300px;
        margin: auto;
        background: chocolate;
      }
    </style>
  </head>
  <body>
    <div class="outer-wrapper">我需要居中～～～</div>
  </body>
</html>
  • position(定位) + calc。
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>水平垂直居中</title>
    <style>
      .outer-wrapper {
        position: absolute;
        left: calc(50% - 250px);
        top: calc(50% - 150px);
        width: 500px;
        height: 300px;
        background: chocolate;
      }
    </style>
  </head>
  <body>
    <div class="outer-wrapper">我需要居中～～～</div>
  </body>
</html>

1.4 无法知道需要水平、垂直居中元素宽高

如果我们无法知道需要水平、垂直居中的元素的宽高，我们应该怎么做呢？可以使用以下三种方式：

  • flex布局 主要是给他的父元素设置以下属性
display: flex;
justify-content: center;
align-items: center;

完整的代码如下

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>水平垂直居中</title>
    <style>
      .outer-wrapper {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 500px;
        height: 300px;
        border: 1px solid royalblue;
      }
      .inter-wrapper {
        background: sandybrown;
      }
    </style>
  </head>
  <body>
    <div class="outer-wrapper">
      <span class="inter-wrapper">我需要居中～～～</span>
    </div>
  </body>
</html>

image.png

  • position（定位）+ transform: translate()位移
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>水平垂直居中</title>
    <style>
      .outer-wrapper {
        position: relative;
        width: 500px;
        height: 300px;
        border: 1px solid royalblue;
      }
      .inter-wrapper {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        background: sandybrown;
      }
    </style>
  </head>
  <body>
    <div class="outer-wrapper">
      <span class="inter-wrapper">我需要居中～～～</span>
    </div>
  </body>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>文本水平垂直居中</title>
    <style>
      .outer-wrapper {
        display: grid;
        width: 500px;
        height: 300px;
        border: 1px solid royalblue;
      }
      .inter-wrapper {
        align-self: center;
        justify-content: center;
        background: sandybrown;
      }
    </style>
  </head>
  <body>
    <div class="outer-wrapper">
      <span class="inter-wrapper">我需要居中～～～</span>
    </div>
  </body>
</html>

image.png

2. 今日总结

  • 文本/行内元素/行内块元素可以使用text-align: center水平居中
  • 文本/行内元素/行内块元素可以使用line-height垂直居中
  • 多行文本可以使用在外层包裹一个行内块元素然后在使用text-align: center、line-height、vertic-align居中
  • 对于已知宽高的元素可以采用position+负margin、position+margin及position+calc的方式居中。
  • 对于未知宽高的元素可以采用position+transform、flex布局及grid布局的方式居中
avatar
文章
阅读
粉丝