彻底弄懂CSS居中

面试必考科目

水平居中

行内元素

inline/inline-block/inline-table/inline/flex:

text-aligin：center

块级元素

固定宽度：

margin-left: auto;
margin-right: auto;

多个水平的块级元素

两种方式

1. display属性设置为inline-block

   display: inline-block;
   text-align：center;
   

2. flex布局

   display: flex;
   justify-content：center
   

多个垂直的块级元素

margin-left: auto;
margin-right: auto;

垂直居中

行内元素

1. 给定同样大小的padding-top和padding-bottom
2. line-height和height相等 并且不换行

块级元素

1. 高度固定：通过设置top50%，margin-top为容器高度的一半
2. 高度不固定：通过设置top50% 然后transform: translateY(-50%);
3. flex布局

.parent {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

水平+垂直居中

宽高固定

top left 50%和margin-top margin-left分别为容器高度和宽度的一半

宽高不固定

top left 50%和transform: translate(-50%, -50%)

flex

.parent {
	display: flex;
	justify-content: center;
	align-items: center;
}