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;
}
未完待续,之后还会将遇到的例子后续补充。
