div不设置宽和高实现水平和垂直居中

阿奎666

于 2020-10-05 20:32:36 发布

阅读量486

点赞数

分类专栏： css样式文章标签： css

本文链接：https://blog.youkuaiyun.com/thickhair_cxy/article/details/108932405

版权

css样式专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何利用CSS使div元素在没有设定宽度和高度的情况下，实现在页面中水平和垂直居中对齐的方法，包括使用display属性、flex布局和grid布局等解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<div id="wrap">
    <div class="box">
      <h1>666</h1>
      <h1>666</h1>
      <h1>666</h1>
    </div>
  </div>
第一种方法（absolute+translate）不兼容ie8，因为这个transform属性不兼容ie8
    #wrap {
      width: 100%;
      height: 100%;
      background-color: yellow;
      position: relative;
    }

    .box {
      background-color: red;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

第二种
    #wrap {
      width:300px;
      height: 300px;
      background-color: yellow;
      display: table-cell;指定对象作为表格单元格。类同于html标签<td>
      text-align: center;
      vertical-align: middle;
    }
    .box {
      background-color: red;
      display: inline-block;
    } 


第三种
    #wrap {
      width: 100%;
      height: 100%;
      background-color: yellow;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .box {
      background-color: red;
    }