基本就是翻译
https://css-tricks.com/centering-css-complete-guide/#center-horizontally
原文是根据需要的居中选项不断展开的,比较方便查看,建议看看原文
水平居中
-
inline或者inline-*类型的
父级元素text-align: center; -
块级元素
目标元素margin: 0 auto;
float的元素https://css-tricks.com/float-center/ -
多个块级元素
a.inline-block
父级元素text-align: center;,目标元素display: inline-block;
b.flex
父级元素display: flex;justify-content: center;
垂直居中
- inline或者inline-*类型的
a.单行
父级元素上下的padding相等
b.多行
i.父级元素上下的padding相等也可以试试,不一定有效
ii.使用table或者父级元素display: table;目标元素display: table-cell;vertical-align: middle;
iii.父级元素display: flex;justify-content: center;flex-direction: column;
iv.使用一个before伪元素进行对齐,我试了一下这种方式好像有问题,建议看原文 - 块级元素
a.知道高度
绝对定位,top: 50%;margin-top: -高度的一半;
b.不知道高度
绝对定位,top: 50%;transform: translateY(-50%);
c.考虑flex
父级元素display: flex;justify-content: center;flex-direction: column;
水平和垂直居中都要
- 是否具有固定宽高
绝对定位,50% / 50%,负margin - 未知宽高
绝对定位,50% / 50%,transform: translate(-50%, -50%); - 考虑flex
display: flex;justify-content: center;align-items: center;