元素居中问题详解

妖狐艹你老母 2022-05-20 00:27 219阅读 0赞

##### 子元素水平居中于父元素中 #####

1) width + margin

.par {
       border: 1px #000 solid;
       height: 200px;
    }
    .chi {
       border: 1px red solid;
       width: 100px;    // *
       margin: 0 auto;  // *
    }

2) 行内元素居中

.par {
       border: 1px #000 solid;
       height: 200px;
       text-align: center;     // *
    }
    .chi {
       border: 1px red solid;
       display: inline-block;  // *
    }

3) 定位

.par {
       border: 1px #000 solid;
       position: relative;            // *
       height: 200px;
    }
    .chi {
       border: 1px red solid;
       position: absolute;            // *
       left: 50%;                     // *
       transform: translateX(-50%);   // *
    }

4) table

.par {
       border: 1px #000 solid;
       height: 200px;
    }
    .chi {
       border: 1px red solid;
       margin: 0 auto;    // *
       display: table;    // *
    }

5) flex

.par {
       border: 1px #000 solid;
       height: 200px;
       display: flex;            // *
       justify-content: center;  // *
    }
    .chi {
       border: 1px red solid;
    }

##### 子元素垂直居中 #####

1) 定位

.par {
       border: 1px #000 solid;
       height: 200px;
       position: relative;            // *
    }
    .chi {
       border: 1px red solid;
       position: absolute;            // *
       top: 50%;                      // *
       transform: translateY(-50%);   // *
    }

2) flex

.par {
       border: 1px #000 solid;
       height: 200px;
       display:flex;          // *
       align-items: center;   // *
    }
    .chi {
       border: 1px red solid;
    }

3) table

.par {
       border: 1px #000 solid;
       height: 200px;
       display:table-cell;    // *
       vertical-align: middle;// *
    }
    .chi {
       border: 1px red solid;
    }

水平垂直居中

1) 定位

.par {
       border: 1px #000 solid;
       height: 200px;
       position: relative;                // *
    }
    .chi {
       border: 1px red solid;
       position: absolute;                // *
       left: 50%;                         // *
       top: 50%;                          // *
       transform: translate(-50%, -50%);  // *
    }

2) flex

.par {
       border: 1px #000 solid;
       height: 200px;
       display: flex;            // *
       justify-content: center;  // *
       align-items: center;      // *
    }
    .chi {
       border: 1px red solid;
    }

3) table

.par {
       border: 1px #000 solid;
       height: 200px;
       width: 500px;
       display: table-cell;    // *
       vertical-align: middle; // *
       text-align: center;     // *
    }
    .chi {
       border: 1px red solid;
       display: inline-block;  // *
    }

.par {
       border: 1px #000 solid;
       height: 200px;
       width: 500px;
       display: table-cell;      // *
       vertical-align: middle;   // *
    }
    .chi {
       border: 1px red solid;
       display: table;           // *
       margin: 0 auto;           // *
    }

##### 左侧定宽右侧适应 #####

1) float + margin

.left {
       border: 1px red solid;
       float: left;
       width: 100px;
       height: 100px;
    }
    .right {
       border: 1px red solid;
       margin-left: 120px;
    }

2) flex

.box {
       display: flex;
    }
    .left {
       border: 1px red solid;
       width: 100px;
       height: 100px;
    }
    .right {
       border: 1px red solid;
       width: 100%;
    }