跳到主要内容

居中总结

1.使用盒子模型​

  • 直接通过盒子模型 margin: 0 auto; 来实现居中
    • 原理：利用了盒子模型在水平布局时的等式
      • 左右外边距 + 可见框宽度 = 包含快宽度
    • 缺点：
      1. 不能处理垂直居中问题
      2. 居中的元素必须指定宽度

2.使用定位​

  • 通过如下代码来实现：

    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;

  • 原理：利用定位后新的等式来实现居中

    • 左右偏移量 + 左右外边距 + 可见框的宽度 = 包含快的宽度
    • 上下偏移量 + 上下外边距 + 可见框的宽度 = 包含快的高度

  • 缺点：

    1. 设置的样式稍微多一些
    2. 必须指定元素的大小

3.使用表格来居中​

  • 将父元素的display设置table-cell，然后通过vertical-align:middle来实现垂直居中，然后再通过子元素 margin:0 auto; 来实现水平居中
  • 也可以将子元素转换为inline-block，然后通过text-align:center来实现水平居中
  • 缺点：
    • 父元素设置为单元格后，默认宽度被内容撑开

4.使用弹性盒来居中​

  • 代码:

    display: flex;
    justify-content: center;
    align-items: center;

  • 缺点：几乎没有