css各种居中解决方法

一、水平居中

1、行内元素

text-align: center;

2、块级元素

margin: 0 auto;

上面两种方法的前提是父元素都没有被float影响

3、多个块级元素

      父元素设置text-align：center。子元素设置inline-block。

.inline-block-center {
  text-align: center;
}
.inline-block-center div {
  display: inline-block;
  text-align: left;

      或者使用flex布局

flex-center {
  display: flex;
  justify-content: center;
}

二、垂直居中

1、单个行内元素

可以设置line-height=height

2、多个行内元素

方法一：可以将元素转为table样式，再设置vertical-align：middle

方法二：使用flex布局

1 flex-center {
2   display: flex;
3   justify-content: center;
4 }

注意：flex布局的前提是父元素必须设置height

3、块级元素

已知高度：父元素relative，子元素absolute等等

未知高度：

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

flex布局：

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