HTML元素居中
元素居中
常用水平垂直居中
行元素、块元素都可以使用。
- flex + center
            
            
              css
              
              
            
          
            .parent {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .child {
    width: 100px;
    height: 100px;
    border: 1px solid red;
  }
            
            
              html
              
              
            
          
            <div class="parent">
    <div class="child"></div>
  </div>parent有多个child时, 会以所有child的宽高之和 来居中显示到parent元素上
- flex + margin
            
            
              css
              
              
            
          
            .parent {
    display: flex;
  }
  .child {
    border: 1px solid red;
  }
            
            
              html
              
              
            
          
            <div class="parent">
    <div class="child"></div>
  </div>parent有多个child时, 子元素会平均分配父节点的宽高
- position: absolute; transform
 父元素高度必须设置,或者父元素高度由其他子元素撑开. 不然会出现父元素高度塌陷
            
            
              css
              
              
            
          
          .parent {
  height: 300px;
  position: relative;
  border:1px solid red;
}
.child {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  border: 1px solid red;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%);
}
            
            
              html
              
              
            
          
          <div class="parent">
  <div class="child"></div>
</div>parent有多个child时, 设置定位absolute的元素会居中显示,其他元素从父元素开始的位置按照从上到下、从左到右的顺序依次排列
- grid- place-item: center
            
            
              css
              
              
            
          
            .parent {
    height: 300px;
    display: grid;
    place-items: center;
    border: 1px solid red;
  }
  .child {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    border: 1px solid red;
  }
            
            
              html
              
              
            
          
            <div class="parent">
    <div class="child"></div>
  </div>parent有多个child时, 子元素水平居中,垂直方向上会平均分配父节点的高度
行内元素居中
- 
水平居中 给父元素添加 text-align: center, 且子元素可继承text-align属性
- 
垂直居中 给父元素添加 display: table-cell; vertical-align: middle;文本垂直居中: 给居中元素添加 height: 30px;line-height: 30px
- 
水平垂直居中 
 table-cell + vertical-align + text-aligncss.parent { width: 300px; height: 300px; border: 1px solid red; display: table-cell; vertical-align: middle; text-align: center; } .child { display: inline-block; width: 35px; height: 35px; border-radius: 50%; border: 1px solid red; }html<div class="parent"> <span class="child"></span> </div>
块级元素居中
- 
水平居中 - 
margin: 0 auto
- 
margin-left: calc(50% - width/2px)子元素 width需固定
 css.parent { height: 300px; border: 1px solid red; } /* margin + auto */ .child-1 { width: 35px; height: 35px; border-radius: 50%; border: 1px solid red; margin: 10px auto; } /* margin-left + calc */ .child-2 { width: 420px; height: 35px; margin-left: calc(50% - 210px); border: 1px solid red; }html<div class="parent"> <div class="child-1"></div> <div class="child-2"></div> </div>
- 
- 
水平垂直居中 
 position: absolute; left; top; bottom; right; margin: auto子元素宽高固定。 css.parent { height: 300px; border: 1px solid red; position: relative; } .child { width: 35px; height: 35px; border-radius: 50%; border: 1px solid red; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; }html<div class="parent"> <div class="child"></div> </div>
margin
当元素脱离默认文档流时(浮动,绝对定位,固定定位),margin失效
给inline-block和inline设置margin:0 auto 时是没用的