【翻译】CSS水平和垂直居中的12种方法

前端 css 翻译

前端

发布日期: 2016-05-20

文章字数: 2.1k

阅读时长: 9 分

原文链接

在 CSS 中有许多不同的方法能够做到水平和垂直居中，但很难去选择合适的那个。我会向你展示我所看到的所有的方法，帮助你在所面对的情境下选择最棒的那一个。

方法 1

此方法将只能垂直居中单行文本。只需将行高设置为对象的高度，文本就会居中。

<div class="container">content</div>

CSS:

.container {
  height: 100px;
  line-height: 100px; /*与div等高*/
}

优点： 1.兼容所有浏览器 2.当没有足够的空间时，文字不会被切断

缺点： 1.只对文本有效（不能块级元素） 2.当为多行文字而不只一行时（如文字换行），这种方法破坏十分严重

此方法对小的元素非常有用，比如将按钮或单行文本字段中的文本垂直居中。

方法 2

此方法使用绝对定位的 div，它的 top 为 50%，上边距设置为内容高度一半的负值。这意味着对象必须有一个固定的高度，这是被 CSS 定义了的。因为它有一个固定的高度，你可能需要给容器 div 设置 overflow：hidden，因此如果内部有太多的内容时，滚动条就会出现，而不是内容在在 div 外继续排列！

<div class="container">content</div>

CSS:

.container {
  height: 100px;
  position: absolute;
  top: 50%;
  margin-top: -50px; /* 负的高度的一半 */
}

优点： 1.兼容所有浏览器 2.不需要嵌套的标签

缺点： 1.当没有足够的空间时，内容会消失（比如当 div 在 body 内部并且用户缩小浏览器窗口，滚动条不会出现）

我们可以修改上面的 CSS 代码使 div 垂直和水平居中。
CSS:

#wrap {
  width: 200px;
  height: 200px;
  position: absolute;
  left: 50%;
  margin-left: -100px; /* 宽度/2 */
  top: 50%;
  margin-top: -100px;
}

方法 3

此方法设置一些 div 的 display 和 table 类似，所以我们可以使用 table 的 veitical-align 属性（这个属性对其他元素的效果很不一样）。

<div id="container">
  <div id="content">content</div>
</div>

CSS:

#container {
  height: 300px;
  display: table;
}
#content {
  display: table-cell;
  vertical-align: middle;
}

优点： 1.内容可以动态改变高度（这样不用一定得在 CSS 中定义） 2.当容器没有足够的空间时，内容不会被切断。

缺点：
1.IE 低版本不支持 2.需要很多嵌套的标签（真的不好，这是一个很主观的话题）

由于这种方法不支持 ie6-7，所以如果你想解决这个问题，只需添加一个新的 div 来使用 hack 方式。

<div class="table">
  <div class="tableCell">
    <div class="content">content</div>
  </div>
</div>

CSS:

.table {
  height: 300px;
  width: 300px;
  display: table;
  position: relative;
  float: left;
}
.tableCell {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  padding: 10px;
  *position: absolute;
  *top: 50%;
  *left: 50%;
}
.content {
  *position: relative;
  *top: -50%;
  *left: -50%;
}

方法 4

在这种方法中，我们将在内容元素前加一个 div。这个 div 将设置为 height:50%;并且 margin-bottom 为内容高度的一半。然后内容清除浮动，内容将会居中。
你应该注意到，如果内容元素在 body 内，我们需要设置 height:100%。

<body>
  <div id="floater"><!--This block have empty content --></div>
  <div id="content">Content section</div>
</body>

CSS:

html,
body {
  height: 100%;
}
#floater {
  float: left;
  height: 50%;
  margin-bottom: -120px; /*240px/2*/
}
#content {
  clear: both;
  height: 240px;
  position: relative;
}

优点： 1.兼容所有浏览器 2.当没有足够的空间（即窗口缩小）时我们的内容不会被切断，滚动条会出现。

缺点： 1.需要一个额外的空元素

查看 demo

方法 5

该方法设置一些 div 来像 table 一样显示，所以我们可以像方法 3 一样使用 table 的 vertical-align 属性，但是对于 IE，我们需要添加一个 inline 水平的标签，块级水平的标签是没有任何用的。

<p class="table">
  <span class="tableCell"
    >Centering multiple lines <br />in a block container.</span
  >
  <!--[if lte IE 7]><b></b><![endif]-->
</p>

CSS:

<style type="text/css">
  .table {
    border: 1px solid orange;
    display: table;
    height: 200px;
    width: 200px;
    text-align: center;
  }
  .tableCell {
    display: table-cell;
    vertical-align: middle;
  }
</style>
<!--[if lte ie 7]>
  <style type="text/css">
    .tableCell {
      display: inline-block;
    }
    b {
      display: inline-block;
      height: 100%;
      vertical-align: middle;
      width: 1px;
    }
  </style>
<![endif]-->

优点：
内容可以动态改变高度

缺点：
很多嵌套标签

方法 6

此方法设置 display:inline-block，添加父元素的高度为固定数值或百分比。

<div id="parent">
  <div id="vertically_center">
    <p>I am vertically centered!</p>
  </div>
  <div id="extra"><!-- ie comment --></div>
</div>

CSS:

<style type="text/css">
  html,
  body {
    height: 100%;
  }
  #parent {
    height: 500px;
    border: 1px solid red;
  }
  #vertically_center,
  #extra {
    display: inline-block;
    vertical-align: middle;
  }
  #extra {
    height: 100%;
  }
</style>
<!--[if lt IE 8]>
  <style type="text/css">
    /*IE6-7not  support display:inline-block,so we need a hack*/
    #vertically_center,
    #extra {
      display: inline;
      zoom: 1;
    }
    #extra {
      width: 1px;
    }
  </style>
<![endif]-->

优点：
兼容所有浏览器

缺点：
需要添加父级的高度，并为 IE 写一个 hack，另外，需要很多标签。

查看 demo

方法 7

该方法用于多行文本和高度是可变的时候，我们需要设置给顶部和底部同样的 padding。

<div class="columns">
  <div class="item">test</div>
</div>

CSS:

.item {
  padding-top: 30px;
  padding-bottom: 30px;
}

优点：
简单且兼容所有浏览器

缺点：
如果高度是固定的，此方法无效的。

方法 8

现在让我们来看看如何使用 jQuery 来居中。

<div class="container">
  <p>Centered in the middle of the page with jQuery</p>
</div>

CSS:

.container {
  background-color: #338bc7;
  width: 270px;
  height: 150px;
}

jQuery:

$(document).ready(function () {
  $(window).resize(function () {
    $('.container').css({
      position: 'absolute',
      left: ($(window).width() - $('.container').outerWidth()) / 2,
      top: ($(window).height() - $('.container').outerHeight()) / 2,
    });
  });
  $(window).resize();
});

优点：
简单且兼容所有浏览器

缺点：
需要 jQuery，如果 JavaScript 被禁用将会失效

方法 9

在这种方法中，我们使用 CSS3 的新属性：flexbox。

<body>
  <img src="//vertical.jpg" alt="flexbox way" />
</body>

CSS:

* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
html,
body {
  height: 100%;
}
body {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%; /*for firefox*/
}

优点：
简单且在响应式设计中效果十分棒

缺点：
在有些浏览器中不起作用，因为其不支持 flexbox

方法 10

如果网站有弹窗，我们不知道它的大小，但我们总是希望它能在大多数的设备里居中。

<div class="container">
  <div class="cotent-header">Popup title</div>
  <div class="content-body">pop up in the window</div>
</div>

CSS:

* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
html,
body {
  height: 100%;
}
.container {
  border: 1px solid #bbb;
  border-radius: 5px;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.content-header {
  padding: 10px 20px;
  background: rgba(0, 0, 0, 0.25);
  color: #fff;
}
.content-body {
  padding: 20px;
  background: #fff;
}

优点：
总是以不同的设备屏幕为中心

缺点：
实现有一点难，在一些浏览器中无效

方法 11

在这种方法中，我们使用伪元素（:before 和:after）来垂直居中网站中的对象。

<body>
  <div>Make it centered in the window</div>
</body>

CSS:

* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
html,
body {
  height: 100%;
}
div {
  display: inline-block;
  vertical-align: middle;
  width: 99.5%;
}
body:after {
  content: '';
  display: inline-block;
  vertical-align: middle;
  height: 100%;
  width: 0px;
}

优点：
在现代浏览器中工作得很好

缺点：
复杂和更多的 CSS 代码。

方法 12

这个方法，我认为是使对象在网站中垂直居中最简单的方法。

<body>
  <div>Make it centered in the window</div>
</body>

CSS:

#center {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

优点：
容易，在现代浏览器中工作得很好

缺点：
也需要 height: 100%;(其实是指用 absolute 定位需要，用 fixed 定位不需要)

兼容性注意事项

正如你所知，IE 是唯一给你带来问题的主要浏览器，你需要测试 IE 的旧版本去解决兼容性问题。

结论

除了上面我收集的，还有其他的一些方法可以做到垂直和水平居中的网站，如果你有其他的方法，请在评论区分享。

Angus

https://github.com/SilenceZeng/posts/63277.html

本博客所有文章除特別声明外，均采用 CC BY 4.0 许可协议。转载请注明来源 Angus !

前端 css 翻译

CSS3学习总结

2016-06-14 前端

前端 css css3 积累

CSS篇02--margin和padding

2016-05-07 前端

前端 css