css设置水平垂直居中的四种方法

一时失言乱红尘 2023-06-06 13:27 4阅读 0赞

如果想要元素左右对其的方法可以使用 float、flex、position

块级元素左右居中 margin 0 auto；

内联元素 父级元素 text-align center

而垂直水平居中呢？

###### 1.position ######

html部分

元素已知宽和高, css部分

.center {
        background: red;
        width: 100px;
        height: 100px;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
      } 
    
       /* or */
    
      .center {
        background: red;
        width: 100px;
        height: 100px;
        position: absolute;
        top: 50%;
        left: 50%;
        margin: -50px 0 0 -50px;
      }

元素宽高未知,css部分

.center {
        color: red;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
      }

###### 2.flex布局 ######

html部分

css部分

.wrap {
        width: 100%;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .item {
        color: red;
      }

###### 3.使用伪类 ######

html部分

css部分

.wrap {
        width: 100%;
        height: 100%;
        background-color: #009ef4;
        text-align: center;
        position: absolute;
        top: 0;
        left: 0;
      }
    
      .wrap:after {
        display: inline-block;
        content: '';
        width: 0;
        height: 100%;
        vertical-align: middle;
      }
    
      .item {
        color: red;
        display: inline-block;
        vertical-align: middle;
      }

###### 4.使用表格 ######

html部分

css部分

.wrap {
        width: 100%;
        height: 100vh;
        display: table;
      }
    
      .item {
        color: #F00;
        display: table-cell;
        vertical-align: middle;
        text-align: center;
      }