知识点记录：css水平垂直居中的几种方法

最新推荐文章于 2023-08-09 11:12:24 发布

前端小乖巧

最新推荐文章于 2023-08-09 11:12:24 发布

阅读量309

点赞数

分类专栏： html/css 文章标签： css javascript css3

本文链接：https://blog.csdn.net/qq_40921328/article/details/129532052

版权

html/css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

在构建页面的时候，我们经常会遇到需要将元素或者文字进行水平垂直居中的需求，在这里归纳记录一下常用的几种方法：
在这里插入图片描述

1、纯flex布局

父级元素设置：
display:flex;
justify-content: center;
align-items: center;
tip：
这种设置会导致父元素下所有的子元素都呈现垂直居中的情况

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>纯flex布局</title>
    <style>
      #box {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 200px;
        height: 200px;
        border: 1px solid red;
      }
    </style>
  </head>
  <body>
    <div id="box">
      <div class="childrenBox">123</div>
    </div>
  </body>
</html>

在这里插入图片描述
2、flex+margin:auto布局

父级元素设置
display:flex;
子元素设置：
margin:auto;
tip：
这种可以对需要进行水平垂直居中的某个子元素进行单独设置

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>flex+margin:auto布局</title>
    <style>
      #box {
        display: flex;
        width: 200px;
        height: 200px;
        border: 1px solid red;
      }
      .childrenBox {
        margin: auto;
      }
    </style>
  </head>
  <body>
    <div id="box">
      <div class="childrenBox">123</div>
    </div>
    <script></script>
  </body>
</html>

在这里插入图片描述
3、绝对定位+margin:auto布局

父级元素设置
position:relative;
子元素设置：
margin: auto;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: 100px;
height: 100px;
tip：
这种情况下，子元素必须要有固定的宽高。如果子元素的定位更改为fixed，则子元素根据浏览器的可视窗口为父元素来水平垂直居中。

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Document</title>
    <style>
      #box {
        width: 200px;
        height: 200px;
        border: 1px solid red;
        position: relative;
      }
      .childrenBox {
        margin: auto;
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        width: 100px;
        height: 100px;
        background-color: yellow;
      }
    </style>
  </head>
  <body>
    <div id="box">
      <div class="childrenBox">123</div>
    </div>
    <script></script>
  </body>
</html>

在这里插入图片描述

4、绝对定位+margin负值布局

父级元素设置
position:relative;
子元素设置：
position: absolute;
left: 50%;
top: 50%;
width: 100px;
height: 100px;
margin-left: -50px;
margin-top: -50px;
tip：
这种情况下，子元素必须要有固定的宽高。如果子元素的定位更改为fixed，则子元素根据浏览器的可视窗口为父元素来水平垂直居中。

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Document</title>
    <style>
      #box {
        width: 200px;
        height: 200px;
        border: 1px solid red;
        position: relative;
      }
      .childrenBox {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 100px;
        height: 100px;
        margin-left: -50px;
        margin-top: -50px;
        background-color: yellow;
      }
    </style>
  </head>
  <body>
    <div id="box">
      <div class="childrenBox">123</div>
    </div>
    <script></script>
  </body>
</html>

在这里插入图片描述

5、绝对定位+transform负百分比布局

父级元素设置
position:relative;
子元素设置：
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
tip：
如果子元素的定位更改为fixed，则子元素根据浏览器的可视窗口为父元素来水平垂直居中。

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Document</title>
    <style>
      #box {
        width: 200px;
        height: 200px;
        border: 1px solid red;
        position: relative;
      }
      .childrenBox {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        background-color: yellow;
      }
    </style>
  </head>
  <body>
    <div id="box">
      <div class="childrenBox">123</div>
    </div>
    <script></script>
  </body>
</html>

在这里插入图片描述
6、table-cell布局

父级元素设置
display: table-cell;
text-align: center;
vertical-align: middle;
子元素设置：
display: inline-block;
tip：
这种情况下，子元素必须为行内（块级）元素。

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Document</title>
    <style>
      #box {
        width: 200px;
        height: 200px;
        border: 1px solid red;
        display: table-cell;
        text-align: center;
        vertical-align: middle;
      }
      .childrenBox {
        display: inline-block;
      }
    </style>
  </head>
  <body>
    <div id="box">
      <div class="childrenBox">123</div>
    </div>
    <script></script>
  </body>
</html>

在这里插入图片描述
7、text-aligin:布局

父级元素设置
height: 200px;
text-align: center;
line-height: 200px;
tip：
这种只能对文本进行水平垂直居中控制

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Document</title>
    <style>
      #box {
        width: 200px;
        height: 200px;
        border: 1px solid red;
        text-align: center;
        line-height: 200px;
      }
    </style>
  </head>
  <body>
    <div id="box">123</div>
    <script></script>
  </body>
</html>

在这里插入图片描述

8、grid布局

父级元素设置
width: 200px;
height: 200px;
border: 1px solid red;
display: grid;
justify-content: center;
align-items: center;
tip：
grid 网格布局的写法是不是看起来和 flex一样，但是两者还是有区别的。flex 布局是一维布局，Grid 布局是二维布局。flex 布局一次只能处理一个维度上的元素布局，一行或者一列。Grid 布局是将容器划分成了“行”和“列”，产生了一个个的网格，我们可以将网格元素放在与这些行和列相关的位置上，从而达到我们布局的目的。

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Document</title>
    <style>
      #box {
        width: 200px;
        height: 200px;
        border: 1px solid red;
        display: grid;
        justify-content: center;
        align-items: center;
      }
    </style>
  </head>
  <body>
    <div id="box">
      <div>123</div>
    </div>
    <script></script>
  </body>
</html>

在这里插入图片描述

前端小乖巧

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
知识点记录：css水平垂直居中的几种方法

Grid 布局是将容器划分成了“行”和“列”，产生了一个个的网格，我们可以将网格元素放在与这些行和列相关的位置上，从而达到我们布局的目的。如果子元素的定位更改为fixed，则子元素根据浏览器的可视窗口为父元素来水平垂直居中。如果子元素的定位更改为fixed，则子元素根据浏览器的可视窗口为父元素来水平垂直居中。如果子元素的定位更改为fixed，则子元素根据浏览器的可视窗口为父元素来水平垂直居中。这种设置会导致父元素下所有的子元素都呈现垂直居中的情况。这种情况下，子元素必须为行内（块级）元素。
复制链接

扫一扫