CSS居中完全指南

qujian 发布于2019-08-30 12:47 / 2740人阅读

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

原载于CSS-Trick，本文着重提取文中的方法，不完全翻译。如有需要，直接原文查看。

人们经常抱怨在CSS中居中元素的问题，其实这个问题其实并不复杂，只是因为方法众多，需要根据情况从众多方法中选取一个出来。接下来，我们做一个‘决定树’来帮我们把问题变的简单一点。首先你需要居中：

水平

需要居中 inline 或者 inline-* 元素（如文字或者链接）？

需要居中 block 类的元素？

需要居中多个 block 元素？

垂直

需要居中 inline 或者 inline-* 元素（如文字或者链接）？

需要居中 block 类的元素？

既水平又垂直

固定宽高

不固定宽高

使用 flexbox

水平居中 水平居中 inline 或者 inline-* 元素

你可以轻松的在一个 block 元素中水平居中一个 inline 元素，以下代码对 inline，inline-block，inline-table 和 inline-flex 等有效

.parent {
  text-align: center;
}

水平居中 block 类的元素

在 block 元素被设定固定宽度的情况下，可以使用设置元素 margin-left 和 margin-right 的值为 auto 的方法实现水平居中。

.child {
  width: 400px;
  margin: 0 auto;
}

水平居中多个 block 类的元素

通过 inline-block实现

.parent {
  text-align: center;
}
.child {
  display: inline-block;
  text-align: left;
}

通过 flexbox 实现

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

垂直居中 垂直居中 inline 或者 inline-* 元素 单行

inline/text 元素可以简单的用设置相同的上下 padding 值达到垂直居中的目的。

.center {
  pading-top: 30px;
  padding-bottom: 30px;
}

如果因为某种原因不能使用 padding 的方法，你还可以设置 line-height 等于 height来达到目的。

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

多行

相同的上下 padding 也可以适用于此种情况，如果不能生效，你可以尝试将该元素的父元素的 dispaly 设置为 table ，同时该元素的 dispaly 设置为 table-cell，然后设置 vertical-align。

.parent {
  display: table;
  width: 200px;
  height: 400px;
}
.child {
  display: table-cell;
  vertical-align: middle;
}

如果上述方法不能使用，你可以尝试使用 flexbox,一个多带带的 flexbox 子元素可以轻易的在其父元素中居中。谨记，这种方法需要父元素有固定的高度。

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

如果上述两种方式均不能使用，你可以使用“幽灵元素”技术，这种方法采用伪元素 ::before 撑开高度，文字垂直居中。

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

垂直居中 block 类的元素 已知元素高度

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

未知元素高度

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

使用 flexbox

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

既水平又垂直 固定宽高

.parent {
  position: relative;
}

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

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

  margin: -70px 0 0 -170px;
}

不固定宽高

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

使用 flexbox

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

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

转载请注明本文地址：https://www.ucloud.cn/yun/115065.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 居中完全指南

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

hqman 2019-08-30 13:03 评论0 收藏0
朝花夕拾：CSS居中完全指南

摘要：正文居中是常被开发者抱怨的问题之一。注意你不能将浮动元素居中。水平且垂直居中你可以将前面的方法任意组合起来，实现完美的居中效果。这样就可以使元素水平且垂直居中，并具有良好的浏览器兼容性。参考 Centering in CSS: A Complete Guide BY CHRIS COYIER ON SEPTEMBER 2, 2014 附：文中涉及到了flex的一些用法，如果没有接...

laznrbfe 2019-08-29 13:45 评论0 收藏0
居中的css:完全指南(翻译)

摘要：水平水平居中有行内元素和块元素，行内元素有文字图片链接等块元素主要是等元素。块元素对于一个块元素，可以设置其和自动，就像这样在线查看无论块元素的宽度是否已知，都可以实现水平居中。这里主要参考的是CHRIS COYIER写的一篇的文章(点击查看)，主要讲了关于css水平、垂直居中的一些方法,每个方法后面都有一个demo，可以在线查看效果。 1 水平水平居中有行内元素和块元素，行内元素...

Integ 2019-08-30 12:54 评论0 收藏0