元素居中的那些事儿

| 

关于元素居中的问题一直都是css中抱怨的典范。小伙伴们常常抱怨为什么居个中这么难~ 为了能居中，拼了！！！！！

为了更更好的居中，特地总结了一下居中的方法，方便以后使用。

不要左，不要右，我就要居中！！

一、水平居中（horizontally）

（1）inline、inline-*元素（如文本，超链接等）的水平居中

我们知道，行内元素所占的空间是与元素本身大小相关的。 若要水平居中一个行内元素，只需要用一个块级元素包含它即可：

1
2
3

  .center-child {
    text-align: center;
  }

demo:

See the Pen 行内元素居中 by senola (@senola) on CodePen.

次方法适用于inline、inline-block、inline-table、inline-fex等行内元素

（2）块级元素水平的居中

众所周知，块级元素霸道，它会独占一行。所有我们可以使用margin-left和margin-right的值为auto来居中块级元素（注意，需要给块级元素一个宽度，因为如果不给块级元素一个宽度那么该元素将充满整个屏幕，就不需要居中了）。

1
2
3

 .block-center {
   margin:0 auto;
 }

demo：

See the Pen 块级元素居中 by senola (@senola) on CodePen.

此方法适用于任何宽度的块级元素。不要太爽！

（3）多个块级元素水平居中

假如需要使一个以上的块级元素水平居中，有两种方法：

方法一： 使用inline-block。方法二： 使用flex-box。 如下：

See the Pen RNYyLL by senola (@senola) on CodePen.

其实，水平居中很简单。留意一下行内元素和块级元素的不同就行~ 接下来整整垂直居中！

二、垂直居中（Vertical）

垂直居中需要一些css技巧。

（1）inline、inline-*元素（如文本，超链接等）的垂直居中

1. 单行垂直居中

有时候inline或text元素会默认垂直居中，这是因为元素的padding-top和padding-bottom值相等。

1
2
3
4

.link {
  padding-top: 20px;
  padding-bottom: 20px;
}

如果再一些情况下，padding不方便使用，那么可以设置text的line-height值为text的高度。

1
2
3
4
5

.center-text-trick {
  height: 100px;
  line-height: 100px;
  white-space: nowrap;
}

See the Pen 行内元素单行垂直居中 by senola (@senola) on CodePen.

2. 多行行垂直居中

设置元素的padding-top与padding-bottom相等也可以是多行文本垂直居中。但这不是通用的方法，也许文本元素是在表格的单元格中,又或者是用了css让其行为类似表格。这时候可以使用vertical-align就可以帮助设置元素垂直居中。

下面介绍一种很有意思的方法,该方法被称为ghost element技术，顾名思义，ghost诡异的。该技术中采用了伪元素，来看看吧~ 保证不打死你！！！

1
2
3
4
5
6
7
8
9
10
11
12
13
14

.ghost-center {
  position: relative;
}
.ghost-center::before {
  content: " ";
  display: inline-block;
  height: 100%;
  width: 1%;
  vertical-align: middle;
}
.ghost-center p {
  display: inline-block;
  vertical-align: middle;
}

See the Pen ghost element technique by senola (@senola) on CodePen.

（2）会计元素的垂直居中

1. 知道元素的高度

如果知道块级元素的高度，你可以这样做：

1
2
3
4
5
6
7
8
9

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  height: 100px;
  margin-top: -50px; /* account for padding and border if not using box-sizing: border-box; */
}
2. 不知道元素的高度

如果不知道元素的高度，那么可以采用transform变换。

1
2
3
4
5
6
7
8

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
3. 采用flexbox
1
2
3
4
5
6

.parent {
  display: flex;
  display: -webkit-flex;
  flex-direction: column;
  justify-content: center;
}

三、水平和垂直居中

当然你可以结合以上方法来使元素垂直水平居中。对于水平、垂直同时居中的话我们可以分三种情况：

1. 元素有固定的狂高度

可以采用元素的宽高值得一半并取负值作为margin的值，同时采用绝对定位。这种方法各浏览器都有良好的支持。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

.parent {
  position: relative;
}

.child {
  width: 300px;
  height: 100px;
  padding: 20px;

  position: absolute;
  top: 50%;
  left: 50%;

  margin: -70px 0 0 -170px;
}
2. 元素没有固定的狂高度

如果元素没有固定的宽度和高度，那么我们可以采用transform和绝对定位实现。

1
2
3
4
5
6
7
8
9

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

也可以设置left、right、top、bottom值为0,再设置margin为 auto

1
2
3
4
5
6
7
8
9
10
11

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 0;
  left: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}
3. 使用flexbox
1
2
3
4
5
6

.parent {
  display: flex;
  display: -webkit-flex;
  justify-content: center;
  align-items: center;
}

四、总结

通过以上方法，你可以居中任何元素。妈妈再也不用担心我不会居中喽 O(∩_∩)O~

文章评论

返回顶部