css实现元素居中的几种方法

1. 

.fatherBox{
    width:500px;
    height:500px;
    position:relative;
}
.sonBox{
  width:200px;
  height:200px;
  position:absolute;
  top:0;
  botton:0;
  left:0;
   right:0;
   margin:auto;  
  }

2.

.fatherBox{
    width:500px;
    height:500px;
    position:relative;
 }
.sonBox{
  width:200px;
  height:200px;
  position:absolute;
  top:50%;
  left:50%;
   margin-top:-100px;
   margin-left:-100px;
 }

3.

.fatherBox{
    width:500px;
    height:500px;
    position:relative;
 }
.sonBox{
  position:absolute;
  top:50%;
  left:50%;
   transform:translate(-50%,-50%)
 }

4.

.fatherBox{
    width:500px;
    height:500px;
    display:flex;
    justify-content:center;
    align-items:center;
 }
.sonBox{
  width:200px;
  height:200px;
 }

 

css实现元素居中的几种方法

上一篇:Jenkins + Coding 构建 Docker Image 并自动上传至Docker Registry


下一篇:js 鼠标跟随