CSS居中总结
最近在学习CSS居中,居中里面又包含水平居中和垂直居中,分不太清内联元素(inline or inline-* elements)和块元素(block level element)居中到底应该怎么来居中,记住一个忘了另一个.翻译一篇CSS-TRICKS上的居中完全指南来理清自己的思绪.
水平居中
内联或者内联相关元素(像text或者links)
在块级别的父元素中添加text-align: center; 属性
块元素
在自身CSS中添加属性margin: 0 auto; 这个就相当于margin-left: auto; margin-right: auto; ,当然这里有一个宽度才能看到效果,当块元素没有宽度的时候,会自动铺满整行.
注意:我们不能让有float 属性的元素居中
多个块元素居中
如果现在有两个或以上的块元素,我们又需要在一行上居中.我们就可以使用display 来转换成其他类型.比如我们这里变成inline-block 或变成flexbox
当多个块级元素占不同行的时候,也可以时间居中.
垂直居中
垂直居中比水平居中要复杂.
内联或者内联相关元素(像text或者links)
单行
当单行内联元素有上下相等的padding的时候,可以垂直居中.
如果padding因为某种原因不能改,有个小技巧是设置line-height 和height 一样来达到垂直居中的效果.
多行
给定上下的padding一样可以作用于多行的文本,如果没有起作用的话,可能这个元素里面的文字类型是table cell.我们可以使用vertical-align 来处理
现在貌似使用table已经不推荐使用了,那我们可以使用flexbox,用flexbox就十分的easy了.设置如下属性就行
.flex-center-vertically {
display: flex;
justify-content: center;
flex-direction: column;
height: 400px;
}
上面的flex实现的垂直居中是在父元素有固定高度的情况下生效的.
如果上面两个方法都不流行了的话,那我们还可以使用"ghost element",就是我们说的伪元素
.ghost-center {
position: relative;
}
.ghost-center::before {
content: " ";
display: inline-block;
height: 100%;
width: 1%;
vertical-align: middle;
}
.ghost-center p {
display: inline-block;
vertical-align: middle;
}
块元素
知道元素的高度
一般我们不会设置高度,因为当宽度变化的时候,里面的文本内容会去自动改变父元素的高度.文字样式的变化可以改变高度.文字数量的变化可以改变高度.有固定长宽比的元素比如图像可以在调整大小时改变高度.等等.
如果我们知道高度的话可以这么写
.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?
使用flexbox就比较简单了
.parent {
display: flex;
flex-direction: column;
justify-content: center;
}
水平和垂直居中
我们可以结合上面的水平居中和垂直居中来完成水平和垂直的同时居中.通常有以下三种情况
有固定的高度和宽度的元素
知道宽高的情况下我们一般需要算一下距离上面和左边多少,使用定位来实现.
无固定高度和宽度的元素
不知道宽高,我们也使用定位来实现,这次我们就不需要计算距离,使用50%的translate来实现
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
方便的flexbox
.parent {
display: flex;
justify-content: center;
align-items: center;
}
小结
看到了这么多,发现使用flex是最方便的.关于flexbox的兼容性我们可以点击这里看到.现在我们在写网页的时候能不带宽高的就尽量不要带宽高.
