居中

居中

• html代码：

    <div class="container">
        <div class="content"></div>
    </div>

• css代码

.container {
     width: 100%;
     height: 600px;
     border: 1px solid black;
 }
.container .content {
     width: 100px;
     height: 100px;
     background: red;
 }

水平居中

1. 方法一：将其父元素定位relative，定位absolute + margin auto

.container {
     width: 100%;
     height: 600px;
     border: 1px solid black;
     position: relative;/*相对定位*/
 }
.container .content {
     width: 100px;
     height: 100px;
     background: red;
     position: absolute;/*绝对定位*/
     left: 0;
     right: 0;
     margin: auto;
 }

2. 方法二：定位 absolute + 负margin，

.container {
     width: 100%;
     height: 600px;
     border: 1px solid black;
     position: relative;
 }
.container .content {
     width: 100px;
     height: 100px;
     background: red;
     position: absolute;
     left: 50%;
     margin-left: -50px;
 }

3. 方法三：行内元素水平居中

.container {
     width: 100%;
     height: 600px;
     border: 1px solid black;
     text-align: center;/*块级元素内部的行内元素水平居中*/
 }
.container .content {
     width: 100px;
     height: 100px;
     background: red;
     display: inline-block;/*行块盒*/
 }

垂直居中

1. 方法一：定位 absolute + 负margin

.container {
     width: 100%;
     height: 600px;
     border: 1px solid black;
     position: relative;
 }
.container .content {
     width: 100px;
     height: 100px;
     background: red;
     position: absolute;
     top: 50%;
     margin-top: -50px;
 }

2. 方法二：relative + transform

.container {
     width: 100%;
     height: 600px;
     border: 1px solid black;
 }
.container .content {
     width: 100px;
     height: 100px;
     background: red;
     position: relative;
     top: 50%;
     transform: translateY(-50%);
 }

3. 方法三：通过verticle-align:middle实现垂直居中

• vertical-align:设置元素的垂直对齐方式
• verticle生效的前提是display: inline-block;

.container {
     width: 100%;
     height: 600px;
     border: 1px solid black;
 }
 .container::before{
     content: "";
     display: inline-block;
     vertical-align: middle;
     height: 100%;
 }
.container .content {
     width: 100px;
     height: 100px;
     background: red;
     display: inline-block;
     vertical-align: middle;/*把此元素放置在父元素中部*/
 }

水平垂直居中

1. 方法一：将其父元素定位relative，定位absolute + margin auto

.container {
     width: 100%;
     height: 600px;
     border: 1px solid black;
     position: relative;
 }
.container .box {
     width: 100px;
     height: 100px;
     background: red;
     position:absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     margin: auto;
 }

2. 方法二：定位 absolute + 负margin，（为父元素设置了相对定位之后，子元素的绝对定位就是相对于父元素盒子的左上顶点，所以定位之后，需要回退盒子一半的距离）

.container {
     width: 100%;
     height: 600px;
     border: 1px solid black;
     
     position: relative;
 }
.container .content {
     width: 100px;
     height: 100px;
     background: red;
     
     position:absolute;
     top: 50%;
     left: 50%;
     margin-left: -50px;  /* 左偏移量取其元素宽度的一半的负值 */
     margin-top: -50px;    /* 上偏移量取其元素高度的一半的负值 */
 }

3. 方法三：利用transform,translate

.container{
    width:600px;
    height: 600px;
    border: 1px solid black;
    position: relative;
}
.container .box{
    width: 100px;
    height: 100px;
    background: red;
    
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);  /*以左上角为原点，故不处于中心位置,translate(-50%,-50%) 作用是，往上（x轴）,左（y轴）移动自身长宽的 50%，以使其居于中心位置*/
}