CSS实现居中对齐的几种方式

CSS实现居中对齐的几种方式

页面布局中，居中对齐是我们经常遇到的场景，现在总结几个常用的方式供大家参考。

场景一：按钮文字居中对齐，line-height + text-align

html代码：

Hello World

CSS代码：

.btn{
  width: 120px;
  height: 48px;
  border: none;
  background: #f8f8f8;
  color: #333;
  /* 文本水平居中 */
  text-align: center;
  /* 文本垂直居中 */
  ling-height: 48px;
}

效果如图所示：

image.png

场景二：父元素内部的子元素居中对齐，子元素设置position定位来实现

方式1：position+top/left定位实现

HTML代码：

CSS代码：

.father {
    width: 400px;
    height: 400px;
    margin: 0 auto;
    margin-top: 100px;
    background: lightblue;
    /*子元素定位可以是相对定位，也可以是绝对定位，所以父元素最好做定位限制。*/
    position: relative;
 }

.son {
    width: 100px;
    height: 100px;
    border: none;
    background: #1c3beb;
    /* 居中代码，定位可以是相对定位，也可以为绝对定位 */
    position: relative;
    top: calc(50% - 50px);
    left: calc(50% - 50px);
}

方式2：position+top/left+transform来实现居中

上面的子元素的偏移量计算，也可以由CSS3中的新属性transform来实现：

.son {
    width: 100px;
    height: 100px;
    border: none;
    background: #1c3beb;
    /* 居中代码，定位可以是相对定位，也可以为绝对定位 */
    position: absolute;
    top: 50%;
    left: 50%;
    /*百分比是相对于自身宽高的偏移量计算*/
    transform: translate(-50%, -50%);
}

方式3：position+margin来实现居中

上面的子元素也可以利用绝对定位元素的流体特性和margin:auto的自动分配特性来实现居中：

.father {
    width: 400px;
    height: 400px;
    margin: 0 auto;
    margin-top: 100px;
    background: lightblue;
    position: relative;
 }

.son {
    width: 100px;
    height: 100px;
    border: none;
    background: #1c3beb;
    /* 居中代码，定位为绝对定位 */
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

方式4：弹性布局实现居中

.father {
    width: 400px;
    height: 400px;
    margin: 0 auto;
    margin-top: 100px;
    background: lightblue;
    /*启用弹性布局，主轴与交叉轴都采用居中对齐*/
    display: flex;
    justify-content: center;
    align-items: center;
}

.son {
    width: 100px;
    height: 100px;
    border: none;
    background: #1c3beb;
}

还有像grid布局、table布局、absolute+calc计算布局等也可以实现居中对齐，这里就不再一一列举。以上几种对齐效果都一样，但是考虑到兼容性等问题，推荐方式3。以上几种方式的对齐效果如下：

image.png