玉jade 2023-02-27 16:50 采纳率: 100%
浏览 32
已结题

2个div在一个容器,其中一个如何自动垂直居中

2个div在一个容器,其中一个如何自动垂直居中

在DIV0中有两个DIV,其中DIV1固定,DIV2高度会根据内容变化,DIV1如何在DIV0中垂直居中。
CSS设置为:

DIV0{
        height: 100%;
        width: 100%;
        position: relative;}
DIV1{
         width: 14%;
          height: 14%;
          display: inline-block;
}
DIV2{
          display: inline-block;
          position: absolute;
          height: 100%;}
  • 写回答

6条回答 默认 最新

  • CSDN专家-showbo 2023-02-27 17:13
    关注
    <!doctype html>
    <style>.wrap{width:640px;margin:50px auto}
        #DIV0 {
            height: 100%;
            width: 100%;
            position: relative;
            background: #ccc;
            padding: 100px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            box-sizing: border-box
        }
    
        #DIV1, #DIV2 {
            width: 200px;
            height: 200px;
            display: inline-block;
            background: blue
        }
    
        #DIV2 {
            height: auto;/*自动高度*/
            background: yellow
        }
    </style>
    <div class="wrap">
        <div id="DIV0">
            <div id="DIV1"></div>
            <div id="DIV2">
                1<br />2<br />3<br />
                1<br />2<br />3<br />
                1<br />2<br />3<br />
                1<br />2<br />3<br />
                1<br />2<br />3<br />
                1<br />2<br />3
            </div>
        </div>
    </div>
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(5条)

报告相同问题?

问题事件

  • 系统已结题 3月8日
  • 已采纳回答 2月28日
  • 创建了问题 2月27日

悬赏问题

  • ¥15 宇视监控服务器无法登录
  • ¥15 PADS Logic 原理图
  • ¥15 PADS Logic 图标
  • ¥15 电脑和power bi环境都是英文如何将日期层次结构转换成英文
  • ¥15 DruidDataSource一直closing
  • ¥20 气象站点数据求取中~
  • ¥15 如何获取APP内弹出的网址链接
  • ¥15 wifi 图标不见了 不知道怎么办 上不了网 变成小地球了
  • ¥50 STM32单片机传感器读取错误
  • ¥50 power BI 从Mysql服务器导入数据,但连接进去后显示表无数据