Css水平垂直居中

44年前我们把人送上月球,但在CSS中我们仍然不能很好实现水平垂直居中,世界未解之谜 戳这里

这次直接上干货

绝对定位

1
2
3
4
5
6
.element {
width: 600px; height: 400px;
position: absolute; left: 50%; top: 50%;
margin-top: -200px; /* 高度的一半 */
margin-left: -300px; /* 宽度的一半 */
}

兼容性不错的主流用法,但,这种方法有一个很明显的不足,就是需要提前知道元素的尺寸。否则margin负值的调整无法精确。此时,往往要借助JS获得
CSS3的兴起,使得有了更好的解决方法,就是使用transform代替margin. transform中translate偏移的百分比值是相对于自身大小的,于是,我们可以:

1
2
3
4
5
.element {
width: 600px; height: 400px;
position: absolute; left: 50%; top: 50%;
transform: translate(-50%, -50%); /* 50%为自身尺寸的一半 */
}

IE9(-ms-), IE10+以及其他现代浏览器才支持

margin:auto

1
2
3
4
5
.element {
width: 600px; height: 400px;
position: absolute; left: 0; top: 0; right: 0; bottom: 0;
margin: auto; /* 有了这个就自动居中了 */
}
1
top: calc(50% - 50px);

该方法IE8+以及其他浏览器都是OK的。

CSS3相对视窗长度

vw是相对于视窗的宽度。与你预期刚好相反,1vw相当于视窗宽度的1%,而不是100%
与vw相似的是,1vh相当于视窗高度的1%
如果视窗的宽度小于高度,1vmin等于1vw,反之,如果视窗宽度大于高度,1vmin等于1vh
如果视窗的宽度大于高度,1vmax等于1vw,反之,如果视窗宽度小于高度,1vmax等于1vh

1
2
3
4
5
6
7
8
.md-warp{
position: relative;
}
.md-main{
position: absolute;
margin: 50vh auto 0;
transform: translateY(-50%);
}

注意:这种方法最大的局限是只能适用于元素在视窗中垂直居中,如果是在局部的某个地方就无能为力了

Flexbox

1
2
3
4
5
6
.md-warp{
display:flex;
}
.md-main{
margin: auto;
}
1
2
3
4
5
6
7
8
.md-warp{
display:flex;
justify-content: center;
align-items: center;
}
.md-main{
}

在一些浏览器中,可能会导致元素出现略微的模糊,那是因为元素有可能被放置在半个像素位置上。我们可以通过transform-style:preserve-3d来解决,但这是一个Hack手段,不能保证它不会过时。

table-cell

1
2
3
.dibfu{
display:table
}
1
2
3
4
.divzi{
display:table-cell;
vertical-align:center;
}

到此为止,后期如有收集,再加入!

曾梦想仗剑走天涯!

文章目录
  1. 1.
  2. 2.
    1. 2.1. 绝对定位
    2. 2.2. margin:auto
    3. 2.3. CSS3相对视窗长度
    4. 2.4. Flexbox
    5. 2.5. table-cell
  3. 3.
  4. 4.
|