盒子内部的两个div如何垂直居中显示

最新推荐文章于 2024-06-21 10:51:17 发布

mfc小白

最新推荐文章于 2024-06-21 10:51:17 发布

阅读量2.2k

点赞数 2

分类专栏：笔记文章标签：前端 css3

本文链接：https://blog.csdn.net/weixin_39444480/article/details/123783480

版权

笔记专栏收录该内容

1 篇文章 0 订阅

订阅专栏

最近的项目中经常遇到两个div并排显示，并且他们需要垂直居中显示，由于对css不大熟悉，所以每次都需要翻阅资料进行查阅，所以把自己学习的成果记录下来，方便以后进行查阅。

项目背景

本页面需要三个div，一父两子，要求两个子div在父div中垂直居中显示，此文中分别为三个div定义三个样式表，分别为parent、children1、children2。三个样式表是为了定义盒子的布局，另外我们还需要定义三个样式表来表示盒子的大小，分别为divParent、divChildren1、divChildren2，这三个盒子的布局如下：

<style>
  .divParent {
    width: 300px;
    height: 300px;
    background-color:cadetblue;
  }

  .divChildren1 {
    width: 100px;
    height: 100px;
    background-color: red;
  }

  .divChildren2 {
    width: 100px;
    height: 50px;
    background-color: blue;
  }
</style>

<body>
  <div class="divParent parent">
    <div class="divChildren1 children1"></div>
    <div class="divChildren2 children2"></div>
  </div>
</body>

本文所要的最终呈现效果如图所示：

使用方法介绍

弹性布局

1.直接在父元素中设置

.parent {
    display: flex;
    justify-content: center;
    align-items: center;
  }

2.通过使用margin来实现子元素的布局（弹性布局，子div设置margin: 0 auto即可实现垂直居中）

.parent {
    display: flex;
  }

.children1 {
    margin: calc(50% - 50px) 0 0 auto;
  }

.children2 {
    margin: calc(50% - 25px) auto 0 0;
  }

3.使用align-self设置子元素的布局，align-self设置完后，使得该子元素不继承父元素的样式

  .parent {
    display: flex;
  }

  .children1 {
    align-self: center;
  }

  .children2 {
    align-self: center;
  }

绝对定位

1.父元素设置相对定位，子元素设置绝对定位，然后子元素先设置位置，再设置平移距离

  .parent {
    position: relative;
  }

  .children1 {
    position: absolute;
    left: calc(50% - 50px);
    top: 50%;
    transform: translate(-50%, -50%);
  }

  .children2 {
    position: absolute;
    left: calc(50% + 50px);
    top: 50%;
    transform: translate(-50%, -50%);
  }

2.父元素设置相对定位，子元素设置绝对定位，然后子元素先设置位置，再设置边距(无需知道子元素尺寸)

  .parent {
    position: relative;
  }

  .children1 {
    position: absolute;
    top: 0;
    left: -100px;
    right: 0;
    bottom: 0;
    margin: auto;
  }

  .children2 {
    position: absolute;
    top: 0;
    left: 100px;
    right: 0;
    bottom: 0;
    margin: auto;
  }

3.父元素设置相对定位，子元素设置绝对定位，然后子元素先设置位置，再设置边距(需要知道子元素尺寸)

  .parent {
    position: relative;
  }

  .children1 {
    position: absolute;
    left: calc(50% - 50px);
    top: 50%;
    margin: -50px 0 0 -50px;
  }

  .children2 {
    position: absolute;
    left: calc(50% + 50px);
    top: 50%;
    margin: -25px 0 0 -50px;
  }

grid布局

定义一个一行两列的网格，不设置盒子的大小，然后在网格内部设置子元素样式

  .parent {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }

  .children1 {
    justify-self: flex-end;
    align-self: center;
  }

  .children2 {
    justify-self: flex-start;
    align-self: center;
  }

table-cell布局

该布局主要是为了记忆一父一子的用法（父元素设置布局为table-cell，子元素布局为inline-block），在本页面（一父两子）的子元素使用了flex布局使其并排显示，并使其水平居中

.parent {
    display: table-cell;
    vertical-align: middle;
 }

mfc小白

关注

2
点赞
踩
16

收藏

觉得还不错? 一键收藏
0
评论
盒子内部的两个div如何垂直居中显示

盒子模型，垂直居中显示
复制链接

扫一扫

专栏目录