css常用的水平居中

css常用的水平居中

1. margin: 0 auto;法（居中元素为块级元素）

没有设置宽度的话，会独占一行

2. 居中元素为行内元素（text-align：center ）

行内元素的特点： 行内元素的宽度为元素自身撑起的宽度，和其他元素在同一行，高度，宽度，内边距等都是不可控的，即设置padding-left,
padding-right, margin-left, margin-right, height, width 都无法生效

3. 块级元素宽度不确定，（display：inline-block 改变模型）

用法
父盒子用： text-align: center;
子盒子用：display: inline-block;

4. 利用定位实现水平居中(已知宽度)

相对定位： 相对定位就是将元素偏离元素的默认位置，但是并没有脱离文档流，只是视觉上发生的偏移，不会改变元素的display 属性 绝对定位：
相对于设置了 相对定位的上层元素或者顶级元素的相对位置，无论设置的元素为块级元素还是行内元素，position 设置成absolute 之后
， 元素display 表现为 block， 元素脱离文档流，父元素无法知道该元素的高度

.container{
  position: relative;
}
.container .box{
  position: absolute;
  width: 50px; /*设置宽度*/
  left: 50%; /*左移50%*/
  margin-left: -25px; /*修正位置*/
}

5. 利用absolute定位，translate 实现水平居中(未知宽度)

.container .box{
  font-size: 20px;
  background-color: blue;
  color: white;
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0);
  width: 50px;
}

6. flex 布局实现

都是在父盒子里设置

父元素设置成flex 布局，可以将子元素设置为水平居中， （但是flex布局部分浏览器无法使用）

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