父级div宽高不固定,自己div垂直水平居中

1
2
3
<div class="box">
         <div class="item"></div>
 </div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.box{
        	  position: relative;
        	  top: 0;
        	  left: 0;
        	  border: 1px solid black;
        	}
        	.item {
        	  position: absolute;
        	  width: 100px;
        	  height: 100px;
        	  top: 50%;
        	  left: 50%;
        	  margin-left: -50px;
                  /*必须固定自身宽高*/
        	  margin-top: -50px;
        	  border: 1px solid black;
        	}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.box{
        	  position: relative;
        	  top: 100px;
        	  left: 0;
        	  border: 1px solid black;
        	}
        	.item {
        	  position: absolute;
        	  width: 100px;
        	  height: 100px;
        	  top: 50%;
        	  left: 50%;
        	  transform: translate(-50%,-50%);
                  /*-50%不必固定自身宽高,文字定位可以用这个*/
        	  border: 1px solid black;
        	}

1
2
3
4
5
6
7
8
9
10
11
12
        	.box{
        	  display: flex;
        	  flex-direction: column;
        	  justify-content: center;
        	  align-items: center;
        	}
                /*无论block,inline都是有效果的*/
        	.item{
        	  width: 100px;
        	  height: 100px;
        	  border: 1px solid black;
        	}