5种常见的居中形式

原创

晨曦前端 2021-12-30 18:06:37 ©著作权

文章标签 html 块元素垂直居中 文章分类 Html/CSS 前端开发

©著作权归作者所有：来自51CTO博客作者晨曦前端的原创作品，请联系作者获取转载授权，否则将追究法律责任

5种常见的居中形式

今天呢，我们主要细讲一下css常见居中形式，我们知道有块状元素水平居中垂直居中以及利用定位居中，或者文字的水平或者垂直居中。且慢，细听！！！

一、块元素水平居中

这个用法就是：margin：0 auto；

我们在开发过程中，我们刚开始遵循标准流，块元素就是独占一行，且在浏览器最左边对齐，这样开发出来的网页是很难看的，一般网页遵循居中显示，大小一般是960px 、980px 等，是小于浏览器屏幕显示的。

我们写一个例子，说明一下上面的意思：

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title></title>
  <style>
    .box{
      width: 980px;
      height: 400px;
      margin: 0 auto;
    }
    .head{
      background-color: aqua;
    }
    .head1{
      width: 200px;
      height: 200px;
      background-color: green;
      margin: 0 auto;
    }
    .banner{
      background-color: cadetblue;
    }
  </style>
</head>
<body>
  <div class="box head">
    <div class="head1"></div>
  </div>
  <div class="box banner"></div>
</body>
</html>

5种常见的居中形式_块元素

margin：0 auto；意思就是上下没有边距，左右水平居中。

二、文字居中

用法：text-align：center；

这个属性是设置在块元素上的，用来控制块元素内部文本或者图片水平居中。

我们写一个例子：

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title></title>
  <style>
    .box{
      width: 500px;
      height: 500px;
      margin: 0 auto;
      text-align: center;
      font-size: 24px;
      font-weight: 700;
      color: blueviolet;
      background-color: aqua;
    }
  </style>
</head>
<body>
  <div class="box">
    欢迎关注她的码农
  </div>
</body>
</html>

5种常见的居中形式_垂直居中_02

text-align：center；意思是文本的排列形式是居中。

三、固定高度垂直居中

这个我们可以用定位或者是外边距，一个块元素嵌套一个块元素，设置了父元素的高度，那么我们用外边距让他向下走，实现垂直居中，也可以用绝对定位让他距顶部50%，top:50%;

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title></title>
  <style>
    .box{
      width: 500px;
      height: 500px;
      background-color: aqua;
      margin: 0 auto;
      position: relative;
    }
    .box1{
      width: 100px;
      height: 100px;
      background-color: red;
      position: absolute;
      margin-top: 200px;
    }
  </style>
</head>
<body>
  <div class="box">
    <div class="box1"></div>
  </div>
</body>
</html>

5种常见的居中形式_块元素_03

四、文字垂直居中

用法：这里主要是使用行内元素高度=行高，可以使文字垂直居中。

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title></title>
  <style>
    .box{
      width: 500px;
      height: 500px;
      line-height: 500px;
      text-align: center;
      background-color: aqua;
      color: darkgreen;
      font-size: 24px;
      font-weight: 700;
      margin: 0 auto;
    }
  </style>
</head>
<body>
  <div class="box">
    欢迎关注她的码农
  </div>
</body>
</html>

5种常见的居中形式_html_04

五、块状元素水平垂直居中

用法：通过外边距将块移动到正中间

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title></title>
  <style>
    .box{
      width: 500px;
      height: 500px;
      background-color: aqua;
      position: relative;
      margin: 0 auto;
    }
    .box .box1{
      width: 100px;
      height: 100px;
      background-color: blueviolet;
      position: absolute;
      margin-top: 200px;
      margin-left: 200px;
    }
  </style>
</head>
<body>
  <div class="box">
    <div class="box1"></div>
  </div>
</body>
</html>