likes
comments
collection
share

css篇-实现水平垂直居中

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

实现水平垂直居中

哈喽呀~小伙伴们，身为一名前端开发，在工作或者学习的过程中，css布局是必不可少的，比如两栏布局、三栏布局或者水平垂直居中，这些都是很常见的布局，今天我们就来探讨一下实现水平垂直居中的方法。

实现水平垂直居中的方法有很多，作者就例举几个自己在工作中经常用到的几个方法，如果有别的实现方法，小伙伴们可以评论留言噢~

1.使用flex布局（弹性布局）

在实现之前，我们先来了解一下flex布局，也就是我们所说的弹性布局，在公工作中也是用到的最多的一种方式。

flex布局是一种css布局方式，它通过设置属性display：flex来创建出一个弹性的容器，然后在其中对元素来进行排列和定位。弹性布局有很多的属性，想要过多了解的小伙伴可以去查阅一下关于弹性盒子的更多详细资料，为了实现我们的水平垂直居中，这里作者只介绍它的两个属性：justify-content和align-items。

注释：下方提到的主轴是通过设置其的flex-direction属性来设置的，默认主轴为x轴，也就是从左往右进行排列。在这里作者不做过多阐释，想要了解更多可以自行去查阅相关资料。

1. justify-content

justify-content属性定义了子元素在主轴上的排列方式。它可以取五个值：

  1. flex-start（默认）：从左至右排列
  2. flex-end：从尾部开始排列
  3. center：居中
  4. space-between：两端对齐后，每个元素再平分剩余空间
  5. space-around：每个元素平分剩余空间

2. align-items

align-items属性定义了子元素在侧轴上的排列方式。它也是可以取五个值

  1. flex-start：从上到下
  2. flex-end：从下到上
  3. center：居中
  4. stretch（默认） ： 拉伸
  5. baseline：和子元素的第一行文字的基线对齐

实现功能

首先，将父元素设置为弹性盒，然后利用其的justify-content和align-items属性将其设置为水平垂直居中，父元素的子元素就会实现水平垂直居中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .father {
            width: 400px;
            height: 200px;
            border: 1px solid red;
            display: flex; //设置为弹性容器
            justify-content: center; // 使子元素在水平方向居中
            align-items: center;  // 使子元素在垂直方向居中
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="content">111111</div>
    </div>
</body>
</html>

css篇-实现水平垂直居中

在实现之前我们先来简单了解一下绝对定位和transform。想要了解更多可以自行查阅相关资料~

1.相对定位

在了解绝对定位之前，我们先了解一下相对定位。

如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。设置它的垂直水平位置，可以使用属性top、bottom，设置水平位置可以使用left或者right。

2. 绝对定位

设置为绝对定位的元素框从文档流完全删除，并相对于其的上一个相对定位的父元素定位，不占据空间。位置的设置和相对定位设置的方式的一致。

3. transform

transform属性可以对元素进行移动、缩放(scale())、旋转（rotate()）、拉长（translate()）或拉伸（skew()）。

实现功能

首先，使用left和right均为50%将元素的左上角定位到父元素的中心； 然后再通过tranform的translate属性来调整元素的中心点到页面的中心。


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .father {
            width: 400px;
            height: 200px;
            border: 1px solid red;
            position: relative;
        }
        .content {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="content">1111</div>
    </div>
</body>
</html>

3. 使用绝对定位定位和margin（需要知道盒子的宽高）

这个方法有两种实现方式。

实现功能

首先，使该元素设置为相对父元素相对定位，并且上个方向（上下左右都均为0），并且将margin设置为auto（因为由于宽高是固定的，所以对应的方向就会平分，进而实现水平垂直居中）。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .father {
            width: 400px;
            height: 200px;
            border: 1px solid red;
            position: relative;
        }
        .content {
            position: absolute;
            width: 100px;
            height: 100px;
            border: 1px solid #000;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            margin: auto;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="content">111111</div>
    </div>
</body>
</html>

css篇-实现水平垂直居中

实现功能

首先，使该元素设置为相对父元素相对定位；其次，使用left和right均为50%将元素的左上角定位到父元素的中心；最后，通过设置margin的负值（元素自身的一半）来调整元素的中心点到父元素的距离。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .father {
            width: 400px;
            height: 200px;
            border: 1px solid red;
            position: relative;
        }

        .content {
            position: absolute;
            width: 100px; /*当前元素的宽度*/
            height: 100px; /*当前元素的高度*/
            border: 1px solid #000;
            top: 50%;
            left: 50%;
            margin-top: -50px;  /*当前元素高度的一半*/
            margin-left: -50px; /*当前元素宽度的一半*/
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="content">111111</div>
    </div>
</body>

</html>

谢谢小伙伴的浏览，到这里，我们这部分的内容就结束了，希望小伙伴们能喜欢~

还是那句话，有别的方法也可以留言评论噢~ 有需要改进的地方也请多多指教~

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