css中盒子居中的常用方法—总结!!!! 不要做个小迷糊哦~~~

·L·坚持做程序员

已于 2024-07-06 14:33:33 修改

阅读量142

点赞数 4

文章标签： css 前端 html

于 2024-07-06 00:15:59 首次发布

本文链接：https://blog.csdn.net/2202_75311997/article/details/140220416

版权

如何使用css让盒子水平垂直居中&&&重要&& 面试常问题

我们只记住最常用的就不怕混乱搞忘记啦~~

1. 弹性布局—flex （推荐）

在父级元素上设置弹性盒，(父级元素形成一个可伸缩的容器) 子级元素就能实现垂直水平居中
display：flex触发弹性盒
justify-content: center;主轴方向居中对齐
align-items: center;侧轴方向居中对齐

<div class="Father">
    <div class="Son">我要C位</div>
</div>

<style>
    .Father{
      width: 200px;
      height: 200px;
      background: #ccc;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .Son{
      width: 100px;
      height: 100px;
      background: pink;
    }
  </style>

子元素居中

2. 定位属性—绝对定位 (父相子绝)

父级设置相对定位relative，子级设置绝对定位absolute
1. margin设为auto, 上，下，左，右都设为0；(推荐)
(兼容性好，适用于未知元素尺寸的情况)

<style>
    .Father{
      width: 200px;
      height: 200px;
      background: #ccc;
      position: relative;
    }
    .Son{
      width: 100px;
      height: 100px;
      background: pink;
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      margin: auto;
    }
  </style>

2. transform 居中；(IE9以下不兼容)
top，left 设置50%, ‘回移’元素本身宽/高度的50%
(兼容性差，适用于未知元素尺寸)

<style>
    .Father{
      width: 200px;
      height: 200px;
      background: #ccc;
      position: relative;
    }
    .Son{
      width: 100px;
      height: 100px;
      background: pink;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate( -50% , -50% );
    }
  </style>

3. 传统方法负margin值居中;（不推荐）
top，left 设置50%, 减去元素本身宽高度的一半
(兼容性好，但需要知道元素本身的尺寸，限制性较大)

<style>
    .Father{
      width: 200px;
      height: 200px;
      background: #ccc;
      position: relative;
    }
    .Son{
      width: 100px;
      height: 100px;
      background: pink;
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: -50px;
      margin-left: -50px;
    }
  </style>

4. 知道元素的尺寸直接计算，通过margin设置居中
margin-top = 父盒子宽度一半 — 子盒子宽度一半
margin-tleft = 父盒子宽度一半 — 子盒子宽度一半

.Son{
	 width: 100px;
     height: 100px;
     background: pink;
	 position: absolute;
	 margin-top:25px;
	 margin-left:25px;
}

3. table布局—table-cell 居中

css新增的table属性，table单元格模式默认垂直居中，父元素变成table单元格模式垂直居中,子元素上实现水平居中。
父元素设置：
display: table-cell; 变为单元格模式
vertical-align: middle;元素在垂直方向对齐方式垂直居中
子元素设置：
子元素如果是行内元素或者行内块元素：
父级使用text-align: center;实现水平居中。
子元素如果是块级元素：
子元素直接使用margin:auto;

如果子元素是块级元素
<style>
    .Father{
      width: 200px;
      height: 200px;
      background: #ccc;
      display: table-cell;    *1*父元素变成tabel单元格模式,下面的子元素垂直居中显示
      vertical-align: middle; *2*设置父元素在垂直方向对齐方式
    }
    .Son{
      width: 100px;
      height: 100px;
      background: pink;
      margin: auto;   *3*块级元素水平居中
    }
  </style>
<body>
  <div class="Father">
    <div class="Son">我要C位</div>
  </div>
</body>

如果子级元素是行内元素或者行内块元素 
<style>
  .Father{
    width: 200px;
    height: 200px;
    background: #ccc;
    display: table-cell;    *1*父元素变成tabel单元格模式
    vertical-align: middle; *2*设置元素在垂直方向对齐方式
    text-align: center;     *3*行内块元素水平居中
   }
</style>