CSS中的垂直居中

木木的编程日记
174 阅读3分钟

CSS 的居中问题同布局一样，是个热点问题。之所以能够称为热点问题，是因为解决它之后能够更为深入的理解 CSS 的一些原理，为以后的熟练使用打下基础。

水平居中可分为对内联元素水平居中和对块级元素水平居中。对内联元素居中使用text-align:center;，块级元素使用margin:0 auto;

垂直居中一直是个不太好处理的问题，这是由于浏览器自身的书写模式（自左上而右下）所影响的。但仍然存在一些解决方案，根据需要可酌情选择。

本文主要内容参考了前端观察，然后对一些难点进行评注。

使用表格布局

这个技巧使用表格的vertical-align属性。

<div class="wrapper">
  <div class="cell">
    <div class="content">Content goes here</div>
  </div>
</div>
<style type="text/css">
  .wrapper {
    display: table;
  }
  .cell {
    display: table-cell;
    vertical-align: middle;
  }
</style>

  • 优点：content 不需要固定高度。当 wrapper 里没有足够空间时， content 不会被截断

  • 缺点：IE8+

使用绝对定位

这个技巧使用绝对定位使得元素脱离正常文档流，并将元素定位至中部，然后通过设置负的边距使内容上浮。

<div class="content">Content goes here</div>
<style type="text/css">
  .content {
    position: absolute;
    top: 50%;
    height: 240px;
    margin-top: -120px; /* 高度的一半 */
  }
</style>
  • 优点：适用所有浏览器，结构清晰。
  • 缺点：只适用于高度固定的容器。当 content 没有足够空间时，超出部分会被隐藏，类似于overflow:hidden，原因是absolute的元素处于正常文档流之外。

使用相对定位

为了解决上个方法的缺陷，就要避免能够触发 BFC 的属性，这里同样使用定位技术。首先顶部创建一个占据一半的浮动元素，然后让内容清除浮动并相对定位。这里使用相对定位是为了是 content 位于浮动元素的上方。

<div class="floater"></div>
<div class="content">Content here</div>
<style type="text/css">
  .floater {
    float: left;
    height: 50%;
    margin-bottom: -120px; /* content高度的一半 */
  }
  .content {
    clear: both;
    height: 240px;
    position: relative;
  }
</style>
  • 优点：适用所有浏览器，结构清晰，内容不会截断。
  • 缺点：引入了多余的元素。

使用绝对定位加外边距

这个方法在absolute-horizontal-vertical-centering-css这篇文章中做了详细介绍。简单来说，使用绝对定位使得当前元素脱离正常的文档流，使用宽高限定元素，使用 top、bottom、left 和 right 属性指定元素到边界的偏移，这里确定了元素的容器空间，然后使用 margin：auto 使得元素位于容器的中间。

<div class="content">Content here</div>
<style type="text/css">
  .content {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    height: 240px;
    width: 70%;
  }
</style>
  • 优点：简单、直观
  • 缺点：需 IE8+，同使用绝对定位。

使用Flex

如今，布局技术进步，可以直接使用flex布局。而且，该布局方式不需要固定内部元素的高度，但父元素的高度是需要确定的。

<div class='container'>
  <div id="content">Content here</div>
</div>
<style type="text/css">
  .container {
    height: 100%;
    
    display: flex;
    align-items: center; /* Magic goes here */
  }
</style>
  • 优点：简单、直观
  • 缺点：需 IE11+。

文本的垂直居中

文本居中的方法很简单，就是将使行高和元素高度相等，这里不再详细介绍。

以上，就是Web中的垂直居中，希望大家以后不再为垂直居中而烦恼。

avatar
文章
阅读
粉丝