css 垂直居中

最新推荐文章于 2023-08-11 23:03:45 发布

顾鸟

最新推荐文章于 2023-08-11 23:03:45 发布

阅读量356

点赞数

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

本文链接：https://blog.csdn.net/qq_40881695/article/details/121698975

版权

css 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

1. flex 布局

理解： 子元素不太多的情况：父元素 display:flex; 而子元素 align-self:center; 子元素比较多的情况：父元素 display:flex; align-items:center;

效果展示：
在这里插入图片描述
代码：

<style type="text/css">
      .parentBox {
        background-color: pink;
        width: 500px;
        height: 200px;
        display: flex;
        align-items: center;
      }
      .parentBox div {
        background-color: deepskyblue;
        color: #ffffff;
        width: 100px;
        height: 100px;
        margin-right: 5px;
      }
    </style>
  <body>
    <div class="parentBox">
      <div></div>
      <div></div>
    </div>
  </body>

2. position结合transform

理解： 父元素使用 relative 占位，子元素使用 absolute 控制位置

效果展示:
在这里插入图片描述
代码:

 <style type="text/css">
      .parentBox {
        background-color: pink;
        width: 500px;
        height: 200px;
        position: relative;
      }
      .childBox {
        background-color: deepskyblue;
        color: #ffffff;
        width: 100px;
        height: 100px;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
      }
    </style>
  <body>
    <div class="parentBox">
      <div class="childBox"></div>
    </div>
  </body>

3. line-height 文本居中

理解： 这种方法适用于子元素为单行文本的情况。

效果展示：
在这里插入图片描述
代码：

  <style type="text/css">
      .parentBox {
        background-color: pink;
        width: 500px;
        height: 200px;
        line-height: 200px;
      }
    </style>
  <body>
    <div class="parentBox">单行文本</div>
  </body>

4. vertical-align

理解： vertical-align 只对行内元素、行内块元素和表格单元格元素生效：不能用它垂直对齐块级元素

效果展示：
在这里插入图片描述代码：

<style type="text/css">
      .parentBox {
        background-color: pink;
        width: 500px;
        height: 200px;
      }
      img {
        width: 100px;
        height: 100px;
        vertical-align: middle;
      }
      span{
        display: inline-block;
        height: 100%;
        vertical-align: middle;
      }
    </style>
  <body>
    <div class="parentBox">
      <span></span>
      <img src="https://z3.ax1x.com/2021/11/24/oPDJk4.jpg"></img>
    </div>
  </body>