CSS篇 垂直居中
来源:互联网 发布:爱普生l351清零软件 编辑:程序博客网 时间:2024/06/07 09:06
参考:http://www.html5cn.org/article-9787-1.html
示例代码:
<!DOCTYPE html>
<html>
<head>
<style>
body {margin: 0;padding: 0;background: #4AC291;font-size: 100% / 1.5 sans-serif;}
main {background: #655;color: white;text-align: center;line-height: 2em;}
</style>
</head>
<body>
<main>这是要居中的元素</main>
</body>
</html>
效果:
方法一:元素具有固定的宽度和高度,添加样式1
main {
position: absolute;
top: 50%;
left: 50%;
width: 12em;
height: 2em;
margin-top: -1em; /* 2/1 = 1 */
margin-left: -6em; /* 12/2 = 6 */
}
效果:
方法二:借助强大的 calc() 函数
效果图:
方法三:利用元素变形属性,元素宽高不确定的情况下,宽高由元素内容决定
main {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
效果图:
注意:这个元素已经完美居中了,完全满足我们的期望。当然没有任何技巧是十全十美的,上面这个方法也有一些需要注意的地方:
我们有时不能选用绝对定位,因为它对整个布局的影响太过强烈。
如果需要居中的元素已经在高度上超过了视口,那么它的顶部会被视口裁剪掉。有一些办法可以绕过这个问题,但hack味道过浓。
在某些浏览器中,这个方法可能会导致元素的显示有一些模糊,因为元素可能被放置在半个像素上。这个问题可以用 transform-style: preserve-3d 来修复,不过这个修复手段也可以认为是一个hack,而且很难保证它在未来不会出问题。
基于视口单位的解决方案
假设我们不想使用绝对定位,仍然可以采用translate()技巧来把这个元素以其自身宽高的一半为距离进行移动;但是在缺少left和top的情况下,如何把这个元素的左上角放置的容器的正中心呢?
我们的第一反应很可能是用margin属性的百分比值来实现,就像这样:
效果图:
基于margin属性百分比值的样式效果
这段代码产生的效果十分离谱。原因在于margin的百分比值时以父元素的宽度作为解析基准的。没错,即使对于margin-top和margin-bottom来说也是这样!
不过幸运的是,如果只是想把元素相对于视口进行居中,仍然是有希望的。CSS值与单位(第三版)定义了一套新的单位,称为视口相关的长度单位。
vw 是与视口宽度相关的。与常人的直觉不符的是,1vw 实际上表示视口宽度的 1%,而不是 100%。
与 vw 类似,1vh 表示视口高度的 1%。
当视口宽度小于高度时,1vmin 等于 1vw,否则等于 1vh。
当视口宽度大于高度时,1vmax 等于 1vw,否则等于 1vh。
在我们这个例子中,适用于外边距的是vh单位:
main {
width: 12em;
margin: 50vh auto 0;
transform: translateY(-50%);
}
效果图:
基于Flexbox的解决方案
body {
display: flex;
min-height: 100vh;
margin: 0;
}
main {
margin: auto;
}
效果图:
若限定宽度,高度超过可视区域高度,则会出现滚动栏
代码:
wibody {
display: flex;
min-height: 100vh;
margin: 0;
}
main {
margin: auto;
width:100px;
}
效果图:
请注意,当我们使用Flexbox时,margin: auto不仅在水平方向上将元素居中,垂直方向上也是如此。还有一点,我们甚至不需要指定任何宽度(当然,如果需要的话,也是可以指定的):这个居中元素分配到的宽度等于 max-content。
如果浏览器不支持Flexbox,页面渲染结果看起来就跟我们的起点图是一样的了(如果设置了宽度的话)。虽然没有垂直居中效果,但也是完全可以接受的。
Flexbo 的另一个好处在于,它还可以将匿名容器(即没有被标签包裹的文本节点)垂直居中。
我们先给这个<main>元素指定一个固定的尺寸,然后借助Flexbox 规范所引入的align-items和justify-content属性,我们可以让它内部的文本也实现居中(我们可以对<body>使用相同的属性来使<main>元素居中,但margin: auto方法要更加优雅一些,并且同时起到了回退的作用)。
代码:
body {
display: flex;
min-height: 100vh;
margin: 0;
}
main {
margin: auto;
display: flex;
align-items: center;
justify-content: center;
width: 12em;
height: 8em;
}
效果图:
- CSS篇 垂直居中
- css之水平垂直居中篇
- CSS实现垂直居中!
- CSS 单行垂直居中
- CSS垂直居中
- CSS水平垂直居中
- CSS垂直居中
- CSS实现垂直居中
- css-图片垂直居中
- CSS 文字 垂直 居中
- css 文字垂直居中
- css图片垂直居中
- css-文本垂直居中
- css内容垂直居中
- css水平垂直居中
- css 垂直居中
- css 垂直居中
- css垂直居中
- 如何关闭mac的SIP
- 离散实验(图的随机生成及欧拉路的确定)
- 指针
- Gitblit的安装及使用
- mysq基础---表管理(二)
- CSS篇 垂直居中
- Android 截屏(Screenshot)代码流程小结
- Laravel框架详解 CURD
- 解决Android模拟器联网
- JavaSE学习(6) 面向对象类和对象(2)
- 合并果子
- HTTP 网络请求原理
- 简单句的核心构成
- 机器学习基本概念梳理