常考题目——如何实现盒子水平垂直居中显示

最新推荐文章于 2023-07-02 13:07:55 发布

BoZai_ya

最新推荐文章于 2023-07-02 13:07:55 发布

阅读量263

点赞数 1

分类专栏： html5+css3 文章标签： html5 css3

本文链接：https://blog.csdn.net/BoZai_ya/article/details/125783828

版权

html5+css3 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文详细总结了在已知和未知盒子宽高的情况下，如何使用CSS实现盒子在页面中的垂直居中。介绍了包括flex布局、绝对定位、transform、text-align+vertical-align等8种常见方法，并提供了示例代码。这些方法适用于不同场景，帮助开发者更好地掌握网页布局技巧。

摘要由CSDN通过智能技术生成

面试很多次，这个题目是不是回回出现被问到

今天就在此总结一下实现盒子垂直居中的方法！

一般我们可以从两方面进行切入总结

1.已知盒子的宽高

2.未知盒子的宽高

首先我先来说一下已知盒子宽高的方法：

  <body>
    <div class="parent">
      <div class="child"></div>
    </div>
  </body>

①flex布局（包含两种）

无论已知未知宽高，都可以使用，如果不考虑兼容性的话，flex布局应用应该是相当广泛的

/*1.flex +   justify-content + align-items*/      
.parent {
        width: 500px;
        height: 500px;
        background-color: rgb(199, 223, 243);
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .child {
        height: 200px;
        width: 200px;
        background-color: rgb(224, 246, 186);
      }
/*2.flex +  margin*/     
      .parent {
        width: 500px;
        height: 500px;
        background-color: rgb(199, 223, 243);
        display: flex;
      }
      .child {
        height: 200px;
        width: 200px;
        background-color: rgb(224, 246, 186);
		margin: auto;
      }

②使用绝对定位absolute + 负值margin

      .parent {
        position: relative;
        width: 500px;
        height: 500px;
        background-color: rgb(199, 223, 243);
      }
      .child {
        position: absolute;
        height: 200px;
        width: 200px;
        background-color: rgb(224, 246, 186);
        top: 50%;
		left: 50%;
        margin-top: -100px;
        margin-left: -100px;
      }

实现效果

③使用绝对定位absolute + margin：auto

      .parent {
        position: relative;
        width: 500px;
        height: 500px;
        background-color: rgb(199, 223, 243);
      }
      .child {
        position: absolute;
        height: 200px;
        width: 200px;
        background-color: rgb(224, 246, 186);
		margin: auto;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
      }

④使用绝对定位absolute + 计算函数calc

      .parent {
        position: relative;
        width: 500px;
        height: 500px;
        background-color: rgb(199, 223, 243);
      }
      .child {
        height: 200px;
        width: 200px;
        background-color: rgb(224, 246, 186);
        position: absolute;
        top: calc(50% - 100px);
        left: calc(50% - 100px);
      }

再来说一下未知盒子宽高的方法：

⑤ 使用绝对定位absolute + transform

      .parent {
        position: relative;
        width: 500px;
        height: 500px;
        background-color: rgb(199, 223, 243);
      }
      .child {
        height: 200px;
        width: 200px;
        background-color: rgb(224, 246, 186);
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }

⑥使用text-align + vertical-align
前提是将该元素设置为行内元素，然后通过给父元素设置text-align：center实现水平居中，给子元素设置vertical-align：middle实现垂直居中

     .parent {
        width: 500px;
        height: 500px;
        background-color: rgb(199, 223, 243);
        line-height: 500px;
        text-align: center;
      }
      .child {
        height: 200px;
        width: 200px;
        background-color: rgb(224, 246, 186);
		display: inline-block;
		vertical-align: middle;
      }

⑦使用grid网格布局

有这种方法，但是目前在开发中应用并不是很广泛，不是不好用，而是兼容性目前不是很理想，实现起来与flex布局类似

      .parent {
        width: 500px;
        height: 500px;
        background-color: rgb(199, 223, 243);
        display: grid;
        justify-content: center;
        align-items: center;
      }
      .child {
        height: 200px;
        width: 200px;
        background-color: rgb(224, 246, 186);
      }

⑧ 使用table表格元素

使用表格元素实现垂直居中，目前我在开发过程中用的确实不多，也不推荐使用