CSS水平居中的7种实现方式

前言

前端开发中元素居中是最常见和最经常使用到的css技巧，不仅开发中经常会用到，面试官出题考核基础时有时候也会问道这类问题。本文主要介绍水平居中的方法。希望对你我都有帮组。

1、text-align: center实现

如果父元素是块级元素且里面包含行内元素，则直接给父元素设置 text-align: center, 如果父元素是行内元素的话父元素无法设置宽高，则需要将其设为块级元素display: block。也对inline、inline-block、inline-table和inline-flex元素水平居中都有效。

HTML

// 父元素是块级元素
<div id="parent">
    <span id="child">我是行内元素</span>
</div>

// 父元素是行内元素
<span id="parent">
    <span id="child">我是行内元素</span>
</span>

CSS

// 父元素是块级元素
.parent {
  height: 300px;
  width: 300px;
  text-align: center;
  background: skyblue;
}

// 父元素是行内元素
.parent {
  height: 300px;
  width: 300px;
  display: block;
  text-align: center;
  background: skyblue;
}

效果：

2、margin: 0 aoto实现

在宽度已知的情况下可以使用margin：0 auto，让元素水平居中。

HTML

<div id="parent">
    <div id="child">我是行内元素</div>
</div>

CSS

.parent {
  height: 300px;
  width: 400px;
  background:  #fcc;
}
.child {
  height: 100px;
  width: 100px; //确保该块级元素定宽
  background: #f66;
  margin: 0 auto;
}

效果：

3、table+margin实现

先将子元素设置为块级表格来显示（类似），再将其设置水平居中display:table在表现上类似block元素，但是宽度为内容宽。

HTML

<div class="parent">
  <div class="child">我是块级元素</div>
</div>

CSS

.parent {
  height: 300px;
  width: 400px;
  background:  #fcc;
}
.child {
  display: table;
  background: #f66;
  margin: 0 auto;
}

效果：

4、absolute+transform实现

首先设置父元素为相对定位，再设置子元素为绝对定位，首先设置子元素的left:50%，然后通过向左移动子元素的一半宽度以达到水平居中。

• 定宽度，设置绝对子元素的margin-left:-元素宽度的一半px或者设置transform: translateX(-50%)
• 不定宽，只能使用transform: translateX(-50%)

HTML

<div class="parent">
    <div class="child">我是块级元素</div>
</div>

CSS

.parent {
  height: 300px;
  width: 400px;
  position: relative;
  background:  #fcc;
}
.child {
  position: absolute;
  background: #f66;
  left: 50%;
  transform: translateX(-50%); // 通用
  /** 定宽度可使用margin-left **/
  width：100px;
  margin-left：-50px;
}

效果：

5、absolute+margin实现

通过子元素绝对定位，外加margin: 0 auto来实现。

HTML

<div class="parent">
    <div class="child">我是块级元素</div>
</div>

CSS

.parent {
  height: 300px;
  width: 400px;
  position: relative;
  background:  #fcc;
}
.child {
  position: absolute;
  background: #f66;
  width: 200px;
  height: 100px;
  margin: 0 auto; /*水平居中*/
  left: 0; /*此处不能省略，且为0*/
  right: 0;/*此处不能省略，且为0*/
}

效果：

6、flexbox实现

使用flexbox布局，只需要给待处理的块状元素的父元素添加属性 display: flex、 justify-content: center

HTML

<div class="parent">
    <div class="child">我是块级元素</div>
</div>

CSS

.parent {
  height: 300px;
  width: 400px;
  display: flex;
  justify-content: center;
  background:  #fcc;
}
.child {
  height: 100px;
  width: 100px;
  background: #f66;
}

效果：

7、flex+margin实现

通过flex将父容器设置为为flex布局，再设置子元素居中。

HTML

<div class="parent">
    <div class="child">我是块级元素</div>
</div>

CSS

.parent {
  height: 300px;
  width: 400px;
  display: flex;
  background: #fcc;
}
.child {
  height: 100px;
  width: 100px;
  margin: 0 auto;
  background: #f66;
}

效果：

最后

如果喜欢的话，欢迎收藏关注。

更多优质文章可以访问GitHub博客，欢迎帅哥美女前来Star！！！

参考文章

• 如何居中一个元素（终结版）
• CSS水平居中+垂直居中+水平/垂直居中的方法总结