网站建设吸引人的话语,网站开发验收报告模板,做盗版网站会怎样,设计好的建设网站前言#xff1a; 这一篇主要是翻译 《how-to-center-anything-with-css》这一篇文章的主要内容#xff0c;再加上自己的一些概括理解#xff1b;主要问题是解决垂直居中的问题。我们知道实现水平居中的方式很多种#xff0c;比如#xff1a; text-align:center; margin:0 …前言 这一篇主要是翻译 《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。 如果应用了绝对定位此方法将退出窗口。 使用我们上周学习的绝对和相对定位方法我们可以应用一个简单的公式来解决这个问题。 1 .container {2 height: 300px;3 width: 300px;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 left: 100px;
15 } 使用这段代码我们将盒子的左边和父容器的边缘之间的距离设置为300-100/2100px,实现 子元素的水平居中 缺点 这种方法仅在父容器具有静态宽度时有效。 必须事先声明父元素和子元素的宽度对于流式布局响应式宽度不起作用 方案三 考虑到响应式设计的普及越来越多的容器最近流行的路线。 这意味着我们需要另一种方法来使孩子居中而不依赖于父节点的宽度。 为了实现这一点我们需要使用左值的百分比。 显而易见的答案是使用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 } 重要的是要注意如果我们的孩子元素有流体宽度这也将工作。 我们使用与以前相同的步骤并提出类似以下内容 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: 70%;
12 background: #222;
13 position: absolute;
14
15 /*Centering Method 2*/
16 margin: 0px 0 0 -35%; /* Half of 70% /*
17 left: 50%;
18 } 【注因为margin的百分比 和子元素的宽度百分比都是根据父元素的宽度来决定的】 方案四 inline-block不仅可以用来代替float并且可以使用inline-block来实现元素的居中效果技巧使父元素 text-align:center; 下面的例子使得ul列表下的li居中显示 1 ul {2 list-style: none outside none;3 padding: 10px;4 background: green;5 text-align: center;6 }7 ul li {8 display: inline-block;9
10 /* 兼容IE 6,7 */
11 *display: inline;
12 zoom: 1;
13
14 background: orange;
15 padding: 5px;
16 } 使一个元素完全居中 现在我们已经有了几个简单而复杂的居中方法现在是时候处理元素水平和垂直的完全居中问题了 幸运的是要解决这个问题我们可以使用我们刚才学到的方法我们只需要考虑高度。 这一次我们也将垂直和水平地同时居中父元素和子元素。 方案一 借鉴绝对定位的水平居中方法如法炮制我们可以利用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 属性 1 .container {2 height: 400px;3 width: 400px;4 background: #eee;5 margin: 50px auto;6 }7 8 h1 {9 font: 40px/1 Helvetica, sans-serif;
10 text-align: center;
11 } 容易吗 但现在让我们说我们要垂直居中这行文本。 如果这是一个段落我们可能会考虑上面的方法但由于它只有一行我们可以使用一个漂亮的把戏。 我们所要做的就是将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如何实现“一行水平居中而两行就左对齐》 转载于:https://www.cnblogs.com/kasmine/p/6344497.html
