CSS垂直居中你会多少种写法

31次阅读

共计 3261 个字符,预计需要花费 9 分钟才能阅读完成。

  CSS 控制居中是前端开发中非常常用的布局技能,本文列出几种 CSS 控制元素居中的几种方法。
  谈及 HTML 元素居中展示,涉及到水平居中和垂直居中,以及水平垂直居中。由于 HTML 文档流是水平方向的,所以水平方向上的布局控制比垂直方向要简单很多,居中也是如此。不过(水平)垂直居中还是有很多种写法,至少一只手是数不过来了,本文列出几种,并进行简单比较。

一、水平居中

  使用 CSS 控制水平居中很简单:

  • 块级元素 设置 width, 并设置 margin auto
  • 内联元素 父元素设置 text-align center

    HTML 代码如下:

<div class="container">
  <div class="content">
    水平居中哦
  </div>
</div>

1. 块级元素水平居中

.container {
  height: 300px;
  width: 300px;
  border: 1px solid red;
}

.content {
  width: 10rem;
  border: 1px solid green;
  margin: 0 auto;
}

效果:

2. 内联元素水平居中

.container {
  height: 300px;
  width: 300px;
  border: 1px solid red;
  text-align: center;
}

.content {
  display: inline-block;
  border: 1px solid green;
}

效果:

代码很简单,而且没什么兼容性问题,所以通常也不需要用别的复杂方式来实现水平居中效果。

二、水平垂直居中

  使用 CSS 控制垂直居中(或者水平垂直居中)就不像控制垂直居中那么方便,这里主要罗列几种。

1. flex 布局

flex 布局出现以后,垂直居中就很方便了,直接设置父元素:

display flex
align-items center

如果同时要水平居中,则同时设置:

justify-content center

需要注意的是 IE10+ 才支持,webkit 前缀浏览器设置 flex 属性需要加 webkit。

.container {
  width: 300px;
  height: 300px;
  border: 1px solid red;
  display: -webkit-flex;
  display: flex; // 关键属性
  align-items: center; // 垂直居中
  justify-content: center // 水平居中
}

.content {border: 1px solid green;}

2. margin+ position:absolute 布局

  position: absolute 布局的元素,通过设置 top/bottom, left/right 这两对属性,可以让元素在垂直方向和水平方向分别具有了自适应的特性。就像 div 在水平方向的默认表现一样!
上文中对于块级元素的水平居中,我们设置宽度然后配合以 margin 可以实现水平居中。而对于设置了 top/bottom,left/right 的 absolute 定位元素,我们设置宽高再配合 margin 就可以达到水平垂直居中:

.container {
  width: 300px;
  height: 300px;
  position: relative;
  border: 1px solid red;
}

.content {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 200px;
  height: 100px;
  margin: auto;
  border: 1px solid green;
}

效果:

兼容性很好,IE8 以上支持。

3. transform + absolute

  absolute 定位元素的 left、top 属性是子元素的左边界、上边界相对父元素进行定位;transform 是 CSS3 中非常强大的一个属性,可以接收多个属性值,包括旋转、缩放、平移等多种功能。这里使用二者配合,先将子元素左上定点定位到父元素中心点,再使用 transform 将子元素中心点移动到父元素的中心点即可:

.container {
  width: 300px;
  height: 300px;
  position: relative;
  border: 1px solid red;
}

.content {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);  
  border: 1px solid green;
}

效果:

  这个方法有个小缺陷,就是 translate 函数的参数,最后的计算值不能为小数,否则有的浏览器渲染出来效果会模糊,所以使用本方法的话最好设置一下宽高为偶数。

4. absolute+margin 负值

  与上一种方法很类似,上一种方法是使用 transform 将元素向左上平移,本方法则是使用 margin 负值的方式将元素拉向左上角。
代码:

.container {
  width: 300px;
  height: 300px;
  position: relative;
  border: 1px solid red;
}

.content {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 200px;
  height: 100px;
  margin-top: -50px;
  margin-left: -100px;
  border: 1px solid green;
}

效果:

5. absolute + calc

  从上两种方法可以看到,absolute 设置了 left 和 top 再通过平移或者 margin 将元素重新定位回去。如果我们直接可以计算出正确的 left 和 top 值,岂不是一次到位?calc 函数正有此功能,当然我们需要知道子元素的宽高:

.container {
  width: 300px;
  height: 300px;
  border: 1px solid red;
  text-align: center;
  position: relative;
}

.content {
  position: absolute;
  border: 1px solid green;
  width: 200px;
  height: 100px;
  left: calc(50% - 100px);
  top: calc(50% - 50px);
}

效果:

6. line-height + vertical-align

  vertical-align 是一个作用于内联元素的属性。内联元素的特性是会和其它内联元素或者文字在同一行显示,但是默认情况下是与父元素“基线对齐”的。这里的的基线指的是父元素每一行中的一个垂直位置,是英文x下边缘所在的水平, 通过设置 vertical-align 为 middle 可以将内联元素的中部对齐父元素的中部(基线 + 字母x的一半高度)。所以可以利用这一点,将父元素的行高设置为其自身高度,然后将子元素与父元素中线对齐,即可实现垂直居中。
代码:

.container {
  width: 300px;
  height: 300px;
  border: 1px solid red;
  line-height: 300px;
  text-align: center;
}

.content {
  display: inline-block;
  line-height: 1.5;
  border: 1px solid green;
  vertical-align: middle;
}

效果:

以上几种方法各有不同的适用条件,因此也有不同的优缺点,下表对各种方法进行了比较:

方法 条件 兼容性
flex 布局 IE10+
margin + absolute 知道子元素宽高 IE8+
transform + absolute 无,子元素宽高应为偶数 IE10+
absolute + margin 负值 知道子元素宽高
absolute + calc 知道子元素宽高 IE9+
line-height + vertical-align 知道父元素宽高

  CSS 中同一种表现效果往往有多种不同的实现方法,要刻意地尝试多种写法,避免熟悉了一两种方法就止步不前,这样才能对各种情况得心应手。


本文最先发布于:http://wintc.top/site/article…,转载请注明出处。

正文完
 0