css元素居中对齐

发布时间 2023-08-31 15:41:40作者: Asaon

css 盒子居中对齐

1. 弹性盒子

.father{

  display:flex;

  justity-content:center;

  align-items:center

}

.son{

...

}

<div class="father">

<div class="son"></div>

</div>

 

2. 父相子绝定位布局 + transfrom

.father{

  position:retivate;

}

.son{

  position:absolute;

  left:50%;

  top:50%;

  transfrom:translate(-50%,-50%);

}

3.父相子绝+ margin auto

.father{
position:relative;
}
.son{
postion:absolute;
left:0;
top:0;
right:0;
bottom:0;
margin:auto;
}