朝花夕拾：CSS居中完全指南

laznrbfe 发布于2019-08-29 13:45 / 1115人阅读

摘要：正文居中是常被开发者抱怨的问题之一。注意你不能将浮动元素居中。水平且垂直居中你可以将前面的方法任意组合起来，实现完美的居中效果。这样就可以使元素水平且垂直居中，并具有良好的浏览器兼容性。

参考

Centering in CSS: A Complete Guide

BY CHRIS COYIER ON SEPTEMBER 2, 2014

附：文中涉及到了flex的一些用法，如果没有接触过flex布局，建议看一下阮一峰老师的这篇指南：Flex 布局教程：语法篇

博客文章地址：https://guitong.github.io/blo... 显示效果更佳。

正文：Centering in CSS: A Complete Guide

CSS居中是常被开发者抱怨的问题之一。Why dose it have to be so hard?? They jeer. 我认为问题不在于它实现起来有多难，而是有太多能够实现它的方法。在不同的情景下，如何去选择，才是真正困惑我们的地方。

所以现在，让我们来做一个决策树，使CSS居中问题更容易解决。

水平居中 --> Is it inline or inline-* elements (like text or links)?

它是行内或类行内元素吗？（比如文本和链接）

你可以将行内元素置于块级父元素内，然后用下面的CSS代码来使其水平居中：

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

https://codepen.io/chriscoyie...

这种方法适用于inline，inline-block，inline-table，inline-flex等类型的元素。

--> Is it a block level element?

它是一个块级元素吗？

为了居中一个块级元素，你可以设置它的margin-left和margin-right值为auto（它的width值已给定，否则将占满容器，也就不需要居中了）。通常简写如下：

.center-me {
  margin: 0 auto;
}

https://codepen.io/chriscoyie...

无论我们将要居中的块级元素或父元素的宽度如何，这都将起作用。

注意你不能将浮动元素居中。There is a trick though.

--> Is there more than one block level element?

有多个块级元素吗？

如果你需要将多个块级元素水平居中于单行，一个好的办法是改变它们的dispaly类型。这里有两个例子，分别使用了inline-block和 flexbox 方法实现：

https://codepen.io/chriscoyie...

除非你是想让它们堆叠在一起，那么刚才使用的设置自动外边距值将仍然有效。

https://codepen.io/chriscoyie...

垂直居中

垂直居中在CSS中比较棘手。

--> Is it inline or inline-* elements (like text or links) ?

它是行内或类行内元素吗？

~~> Is it a single line?

是单行吗？

有时行内／文本元素能垂直居中显示，仅仅是因为它们有相等的上下padding值。

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

https://codepen.io/chriscoyie...

如果由于某些原因，设置padding的方法并不可选，而你需要居中已知不会换行的文本，有一个技巧是使其line-height值与其height值相等。

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

https://codepen.io/chriscoyie...

~~> Is it multiple lines?

是多行吗？

对于多行文本的情况，依然可以使用上下padding相等的方法使其垂直居中，但是如果这种方法失效了，可能文本所在的元素是一个table cell，不管是通过字面量定义的还是通过CSS定义的。（红叶注：这里的意思就是该元素可以是直接使用表格标签声明，也可以是为元素设置display:table-cell;属性而使其成为一个table cell，父元素设置display:table; ）。如果是文本在这样的元素内，该元素默认有CSS属性vertical-align:middle;，所以不需要我们显示地设置。然而，如果你是手动更改CSS使其成为table cell元素的，就需要显示地加入这个属性vertical-align:middle;。

(More on that.)

下面的例子非常清晰地展示了这种方法：

https://codepen.io/chriscoyie...

如果你不喜欢或者这种方法也不好使，也许你可以用flexbox？单个子flex元素可以非常轻松地在父flex元素内垂直居中。

.flex-center-vertically {
  display: flex;
  justify-content: center;
  flex-direction: column;
  height: 400px;
}

https://codepen.io/chriscoyie...

但是要记住，上面的讨论都是基于元素父容器有一个固定的高度（px，%，etc）。

如果这些方法都无法实现，你可以采用“ghost element”技术，将一个全高度的伪元素将放置于容器中，文本将与其垂直对齐。

.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;
}

https://codepen.io/chriscoyie...

—> Is it a block-level element?

它是一个块级元素吗？

~~> Do you know the height of the element?

知道元素的高度吗？

不知道网页布局的高度是相当常见的，有很多原因：如果文本的宽度改变，那么重布局时高度就会改变；文本样式的改变会改变高度；文本数量改变会改变高度；具有固定纵横比的元素（如图像），会在尺寸改变时影响高度。Etc。

但是如果你明确地知道高度，可以像这样使其垂直居中：

.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; */
}

https://codepen.io/chriscoyie...

~~> Is the element of unknown height?

未知元素高度？

没关系。你仍然可以使用类似上面的方法使其居中。先将其绝对定位至父元素半高位置，再提升自身半高距离即可。

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

https://codepen.io/chriscoyie...

~~> Can you use flexbox?

你可以使用flexbox吗？

如果可以，那就相当简单了。

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

https://codepen.io/chriscoyie...

水平且垂直居中

你可以将前面的方法任意组合起来，实现完美的居中效果。但是我发现通常可以将其分为三类：

—> Is the element of fixed width and height?

元素有固定的宽度和高度吗？

先将元素绝对定位至50%／50%位置，然后加入负margin值，使该值等于高度和宽度的一半（注：元素如果有padding要记得计算进去，参考下例）。这样就可以使元素水平且垂直居中，并具有良好的浏览器兼容性。

.parent {
  position: relative;
}
.child {
  width: 300px;
  height: 100px;
  padding: 20px;
  
  position: absolute;
  top: 50%;
  left: 50%;
  
  margin: -70px 0 0 -170px;
}

https://codepen.io/chriscoyie...

—> Is the element of unknown width and height?

元素的宽度与高度未知？

如果你不知道该元素的宽高，可以将它的transform属性设置为translate(-50%, -50%)。也可以达到相同的效果。

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

https://codepen.io/chriscoyie...

—> Can you use flexbox?

你可以使用flexbox吗？

在水平和垂直两个方向上居中元素，你需要用到flex的两个属性：

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

https://codepen.io/chriscoyie...

—> Can you use grid?

这是一个小技巧，对单个元素来说非常有效：

body, html {
  height: 100%;
  display: grid;
}
span { /* thing to center */
  margin: auto;
}

https://codepen.io/chriscoyie...

结论

You can totally center things in CSS !!!

服务器托管私有云 html完全居中 html居中css css权威指南朝花夕拾

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/112682.html

CSS居中完全指南——构建CSS居中决策树

摘要：但是部分浏览器存在兼容性的问题。核心代码宽高不固定水平垂直居中演示使用布局垂直水平居中核心代码使用布局垂直水平居中演示使用布局垂直水平居中核心代码使用布局垂直水平居中演示 CSS居中完全指南——构建CSS居中决策树 showImg(https://segmentfault.com/img/bV8tDq); 本文总结CSS居中,包括水平居中和垂直居中.本文相当于CSS决策树,下次再遇到...

cc17 2019-08-02 10:11 评论0 收藏0
CSS居中完全指南——构建CSS居中决策树

摘要：但是部分浏览器存在兼容性的问题。核心代码宽高不固定水平垂直居中演示使用布局垂直水平居中核心代码使用布局垂直水平居中演示使用布局垂直水平居中核心代码使用布局垂直水平居中演示 CSS居中完全指南——构建CSS居中决策树 showImg(https://segmentfault.com/img/bV8tDq); 本文总结CSS居中,包括水平居中和垂直居中.本文相当于CSS决策树,下次再遇到...

AlienZHOU 2019-08-30 15:53 评论0 收藏0
CSS居中完全指南

摘要：原载于，本文着重提取文中的方法，不完全翻译。人们经常抱怨在中居中元素的问题，其实这个问题其实并不复杂，只是因为方法众多，需要根据情况从众多方法中选取一个出来。原载于CSS-Trick，本文着重提取文中的方法，不完全翻译。如有需要，直接原文查看。人们经常抱怨在CSS中居中元素的问题，其实这个问题其实并不复杂，只是因为方法众多，需要根据情况从众多方法中选取一个出来。接下来，我们做一个‘...

qujian 2019-08-30 12:47 评论0 收藏0
vuejs&electron-vue----朝花夕拾.

摘要：推荐使用使用指定打包位。开发环境跨域代理设置如果是接口，需要配置这个参数如果接口跨域，需要进行这个参数配置通过新窗口打开项目内页面 ————仅以此文记录个人使用vuejs开发项目对一些需求的处理方法,不定期更新... 加载favicon.ico图标 //index.html // build/webpack.dev.conf.js new HtmlWebpackPlugin({ ...

Awbeci 2019-08-22 17:03 评论0 收藏0
CSS 居中完全指南

摘要：在文本前面插入一个高度为百分百的伪元素，让文本与其垂直对齐。块级元素或者使用垂直水平居中或者使用翻译自 https://css-tricks.com/centering-css-complete-guide/ 预先给出这样的样式 .container { width: 100%; height: 200px; background-color: azur...

hqman 2019-08-30 13:03 评论0 收藏0