css居中小结

1.水平居中方法

• 如果居中的对象是一个inline行内元素。
  那么就给他一个爸爸容器，爸爸容器的类型为block元素。
  代码如下：

.我是爸爸元素{
  text-align: center;
}

• 如果想让一个block块级元素居中该怎么办呢？
  那么就设置这个块级元素的margin-left和margin-right的值为auto，再写上一个width就可以了。

.father{
  max-width: 100px;
 margin-left: auto;
 margin-right: auto;
}

注意！现在的页面开发大多数都是响应式开发，除非特别必要，千万不要写死宽度。
写margin的时候也不要这样写：margin:0 auto;,因为可能会造成上下定位的错误，所以缩写是邪恶的。

• 有多个block块级元素居中的方法
  需要把这些块级元素的display设置为inline-block，然后对这些块级元素的爸爸元素设置text-align: center;

.我是爸爸元素{
text-align: center;
}
.我是儿子元素{
display: inline-block;
}

也可以使用flex布局做到
对爸爸元素的设置的代码如下

.我是爸爸元素 {
display: flex;
justify-content: center;         居中方式为居中
}

2.垂直方向居中

• 如果是inline行内元素的话可以通过让padding的上下相等做到这一点.

.xxx{
padding-top: 10px;         设置内边距为10px        
padding-bottom: 10px;         设置内边距为10px
}

也可以使用flex进行设置

.xxx{
  display: flex; 
  justify-content: center;         居中方式为居中
  flex-direction: column;         将主轴设置为垂直方向，起点在上方
}

• block块级元素居中
  个人因学艺不精目前觉得使用flex是最简单的,所以只写这一个.

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

未完待续,之后还会将遇到的例子后续补充。