前言：

这一篇主要是翻译《how-to-center-anything-with-css》这一篇文章的主要内容，再加上自己的一些概括理解；主要问题是解决垂直居中的问题。我们知道实现水平居中的方式很多种，比如：

text-align:center;

margin:0 auto;

等等都可以实现最基本的水平居中，但是对于垂直居中好像就不是很熟悉了，我们先来看看这篇译文讲的是什么，顺便穿插一些其他总结的居中方法于其中。

最近，我们深入探讨了CSS布局背后的核心概念，并探讨了绝对和相对定位之间的差异。我们将使用另一个CSS布局谈话，这一次基于一个根本问题，几乎每个新的开发人员问：你如何实现居中？

有一堆不同类型的web元素和布局情况，每个都需要一个独特的解决方案来定中心（垂直和水平）。今天，我们将讨论一系列这些场景，这样你就可以围绕他们的工作原理，带满信心去实现一切居中问题！

这个是为了什么？

我最近得到了许多挣扎于CSS的布局的基本方法和概念的设计者的评论反馈。许多刚接触CSS的设计者普遍的共识是，他们只是拨弄代码，直到一切符合他们所需要的效果。

我自己也经历过这段时期，我知道这是你的专业成长过程中一个非常令人沮丧的时期。知道答案是正确的在你面前，没有能够弄清楚是令人讨厌和耗时。

如果这听起来很熟悉，希望我可以帮助缓解你在这个时期有一些坚实和实用的建议，如何处理一些常见的布局场景。如果你是一个熟练CSS甚至于可以随手闭上眼睛都可以编写适合CSS代码的高手，那么这篇文章可能不适合你。如果你是一个设计师，只是想更好地了解如何把你的Photoshop文件中的什么，把它变成CSS，那么这篇文章很适合你。让我们开始吧。

使一个元素水平居中

第一个场景是最常见的一个场景：

在视口或浏览器窗口中水平放置元素。要开始，让我们突破一个简单的div，并给它一些基本的样式。

方案一

我们需要做的是利用可以应用于margin 的“auto ”值。

缺点：

必须记在脑里的一些事情

　　首先，你必须为你居中的元素声明一个特定的宽度。高度声明不是必需的，您可以允许内容根据需要确定高度，这是默认设置，但必须始终设置宽度。

重要的是要注意，虽然这个技巧将适用于大多数块级元素，而不仅仅是div，它不会帮助你实现垂直居中。

方案二

使一个绝对定位的元素居中

上面的方法可以自动将一个项目集中在另一个项目中，但是该方法假设您使用默认定位上下文：static。如果应用了绝对定位，此方法将退出窗口。

使用我们上周学习的绝对和相对定位方法，我们可以应用一个简单的公式来解决这个问题。

 .container {

   height: 300px;

   width: 300px;

   background: #eee;

   margin: 10px auto;

   position: relative;

 }

 .box {

   height: 100px;

   width: 100px;

   background: #222;

   position: absolute;

   left: 100px;

 }

使用这段代码，我们将盒子的左边和父容器的边缘之间的距离设置为（300-100）/2=100px,实现子元素的水平居中

缺点：

这种方法仅在父容器具有静态宽度时有效。必须事先声明父元素和子元素的宽度，对于流式布局，响应式宽度不起作用

方案三

　　考虑到响应式设计的普及，越来越多的容器最近流行的路线。这意味着，我们需要另一种方法来使孩子居中，而不依赖于父节点的宽度。

　　为了实现这一点，我们需要使用左值的百分比。显而易见的答案是使用50％，但是这不会真正工作，因为你不是占位元素的宽度。为了使它工作，我们需要添加一个负的 margin-left 的子元素的宽度的一半。

 1 .container {

 2   height: 300px;

 3   width: 70%;

 4   background: #eee;

 5   margin: 10px auto;

 6   position: relative;

 7 }

 8

 9 .box {

10   height: 100px;

11   width: 100px;

12   background: #222;

13   position: absolute;

14

15   /*Centering Method 2*/

16   margin: 0px 0 0 -50px;

17   left: 50%;

18 }

重要的是要注意，如果我们的孩子元素有流体宽度，这也将工作。我们使用与以前相同的步骤，并提出类似以下内容：

 .container {

   height: 300px;

   width: 70%;

   background: #eee;

   margin: 10px auto;

   position: relative;

 }

 .box {

   height: 100px;

   width: 70%;

   background: #222;

   position: absolute;

   /*Centering Method 2*/

   margin: 0px 0 0 -35%; /* Half of 70% /*

   left: 50%;

 }

【注：因为margin的百分比和子元素的宽度百分比都是根据父元素的宽度来决定的】

方案四

inline-block不仅可以用来代替float，并且可以使用inline-block来实现元素的居中效果，技巧，使父元素 text-align:center;

下面的例子使得ul列表下的li居中显示

 ul {

   list-style: none outside none;

   padding: 10px;

   background: green;

   text-align: center;

 }

 ul li {

   display: inline-block;

   /* 兼容IE 6,7 */

   *display: inline;

   zoom:;

   background: orange;

   padding: 5px;

 }

使一个元素完全居中

现在我们已经有了几个简单而复杂的居中方法，现在是时候处理元素水平和垂直的完全居中问题了

幸运的是，要解决这个问题，我们可以使用我们刚才学到的方法，我们只需要考虑高度。这一次，我们也将垂直和水平地同时居中父元素和子元素。

方案一：

借鉴绝对定位的水平居中方法，如法炮制，我们可以利用top值实现垂直居中

.container {

  height: 300px;

  width: 300px;

  background: #eee;

  position: absolute;

  margin: -150px 0 0 -150px;

  left: 50%;

  top: 50%;

}

.box {

  height: 100px;

  width: 100px;

  background: #222;

  position: absolute;

  /*Centering Method 2*/

  margin: -50px 0 0 -50px;

  left: 50%;

  top: 50%;

}

方案二 利用flex布局

align-items 实现垂直居中
justify-content 实现水平居中

.box{

   width:300px;

   height:400px;

   border:1px solid pink;

   display:flex;

   align-items:center;

   justify-content:center;

 }

方案三使用transform实现

代替使用负的 margin值, 我们可以使用负的 translate() transforms属性，这种方式可以不需要事先声明子元素的宽度和高度

.container {

  position:relative;

  height: 200px;

  width: 400px;

  background: #eee;

  margin: 150px auto;

}

.center {

  position: absolute;

  left: 50%;

  top: 50%;

  transform: translate(-50%, -50%);

  width: 40%;

  height: 40%;

  background:red;

}

使文字居中

对于我的下一个技巧，我会教你一些关于文本的居中方法。我们将从容器div中的一个简单的h1元素开始

方案一

使用 text-align 属性

 .container {

   height: 400px;

   width: 400px;

   background: #eee;

   margin: 50px auto;

 }

 h1 {

   font: 40px/1 Helvetica, sans-serif;

   text-align: center;

 }

容易吗？但现在让我们说，我们要垂直居中这行文本。如果这是一个段落，我们可能会考虑上面的方法，但由于它只有一行，我们可以使用一个漂亮的把戏。

我们所要做的就是将line-height属性设置为容器的高度。我使用缩写字体语法完成了以下。

.container {

  height: 200px; /*Set line-height to this value*/

  width: 400px;

  background: #eee;

  margin: 150px auto;

}

h1 {

  font: 40px/200px Helvetica, sans-serif;

  text-align: center;

}

效果图

缺点：

只对于单行文字起作用

关于文字的问题，还可以参考这篇博文《CSS如何实现“一行水平居中，而两行就左对齐》

巴特西

如何使用CSS实现居中

前言：

最新文章

热门文章