本文将讨论可用于居中对齐元素的6种CSS技术(根据最佳实践排序),以及每一种技术最适合应用的场景。这儿,居中对齐指的是将元素安置在其父元素的水平和垂直中心。
.center类表率要居中对齐的元素 .parent类表率其父元素。1. 运用变换(Transform)
什么时候用: 当元素的宽度和高度未知时;卡片式弹出框中有多个子元素,其中一个焦点元素位置于中心。这个思路是运用绝对定位——top和left 50%,而后应用负变换。top和left中运用的值按照父元素的尺寸解析,而translate办法中的值按照元素本身的尺寸解析。
.center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
2. 运用Flex
什么时候用: 当有一个或多个元素要居中时;当子元素是动态的并且体积未知时;当有一行项目必须像页脚同样居中时。这个思路是使父容器作为flexbox并运用flex属性将元素沿水平和垂直方向居中,如下所示。
.parent {
display: flex;
justify-content: center;
align-items: center;
}
当有多个元素必须一个在另一个元素上方堆叠,并使该元素堆叠在其中心时,咱们只需添加以下代码行:
flex-direction: column;
3. 运用负边距
什么时候用: 当元素的高度和宽度已知时。这个思路是再次运用类似于变换技术的绝对定位,但应用的是元素宽度和高度一半的负边距而不是平移。
$w: 200px; /* SCSS 变量 */
$h: 100px; /* SCSS 变量 */
.center {
position: absolute;
top: 50%;
left: 50%;
margin: -50px -100px; /* Negative margin of half the
width and heigh */t
}
为了使这段代码更通用,咱们运用calc()属性,如下所示:
(#{$h} / 2) - 一半高度 (#{$h} / 2) * -1) - 一半高度的负值这般就能够:
margin: calc((#{$h} / 2) * -1) calc((#{$w} / 2) * -1);
4. 运用网格(Grid)
什么时候用: 当仅有一个子元素必须居中时。这个思路是创建一个网格容器并将边距设置为auto。在非网格容器中,当margin设置为auto时,margin-top和bottom取值为0。
然则,在网格容器中,margin-top和bottom平均分配可用空间,从而使元素居中。
.parent {
display: grid;
}
.center {
margin: auto;
}
另一种运用网格来实现居中的办法是:
.parent {
display: grid;
place-items: center;
}
5. 运用填充(Padding)
不意见将此技术用于中心对齐,但它亦是可行的。
什么时候用: 当父元素的高度已知或固按时;其中心元素的高度为弹性可变时。这个思路是为已知固定高度的容器设置固定的垂直填充,并准许子元素占据最大高度和自动边距。
.parent {
height: 600px; //Fixed height
padding: 200px 0; //Fixed vertical padding
}
.center{
margin: 0 auto;
height: 100%; // Child takes max height
}
6. 运用表格单元格
这个技术此刻用得比较少,然则亦值得借鉴。并且,它确实亦是可行的。
这个思路是运用display强制父级表现得像
|