水平垂直居中的常用方法

32 阅读1分钟

在我们开发时候,水平垂直居中是必不可少的,因此我们必须掌握它。

公共css样式和html解构

.main {
    height: 600px;
    width: 600px;
    border: 1px solid red;
}
.main .cowboy {
     width: 300px;
     height:300px;
     border:1px solid red;
}
<div class="main">
  <div class="cowboy">水平垂直居中</div>
</div>

1.使用display:flex实现,设置容器为flex布局,设置主轴和侧轴方向水平垂直居中

.mian {
     display:flex;
     justify-content:center;
     align-items:center;
}

2.使用定位和transform实现。设置父盒子为相对定位,子盒子为绝对定位,然后使用transform属性对子盒子向左和上平移-50%(此方法需要知道父盒子的宽和高,需要进行计算)。

.mian{
    position:relative;
}
.cowboy{
    position:absolute;
    top:300px;
    left:300px;
    transform:translateX(-50%) translateY(-50%);
}

3.使用定位和margin:auto实现。(注意:使用此方法,盒子必须有宽高)

.main{
    position:relative;
}
.cowboy{
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    margin:auto;
}

4.使用grid布局。(注意:兼容问题)

.mian{
    display:grid;
    justify-content: center;
    align-self: center;
}

5.使用定位和margin和外边距设置为本身盒子的一半的负值。

.mian{
    position:relative;
}
.cowboy{
     height: 200px;
     width: 200px;
     border: 1px solid pink;
     position: absolute;
     top: 50%;
     left: 50%;
     margin-left: -100px;
     margin-top: -100px;
}