面试 css水平垂直居中的几种方法

第二天

html 结构：

<div class="wrap allCenter">
   <div class="item allCenterChild"></div>
</div>

1. 第一种：

   .wrap{
   	width: 600px;
   	height: 600px;
   	border: 2px solid purple;
   }
   .item{
   	width: 150px;
   	height: 150px;
   	background-color: green;
   }
   .allCenter{
   	display: flex;
   	justify-content: center;
   	align-items: center;
   }

2. 第二种

   .wrap{
   	width: 600px;
   	height: 600px;
   	border: 2px solid purple;
   }
   .item{
   	width: 150px;
   	height: 150px;
   	background-color: green;
   }
   .allCenter{
   	display: flex;
   }
   .allCenterChild{
   	margin: auto;
   }

3. 第三种

   .wrap{
   	width: 600px;
   	height: 600px;
   	border: 2px solid purple;
   }
   .item{
   	width: 150px;
   	height: 150px;
   	background-color: green;
   }
   .allCenter{
   	display: flex;
   }
   .allCenterChild{
   	align-self: center;
   	margin: auto
   }

4. 第四种

   .wrap{
   	width: 600px;
   	height: 600px;
   	border: 2px solid purple;
   }
   .item{
   	width: 150px;
   	height: 150px;
   	background-color: green;
   }
    .allCenter{
   	display: grid;
   }
   .allCenterChild{
   	margin: auto
   }

5. 第五种

   .wrap{
   	width: 600px;
   	height: 600px;
   	border: 2px solid purple;
   }
   .item{
   	width: 150px;
   	height: 150px;
   	background-color: green;
   }
   .allCenter{
   	display: grid;
   }
   .allCenterChild{
   	justify-self: center;
   	align-self: center;
   }

6. 第六种

   .wrap{
   	width: 600px;
   	height: 600px;
   	border: 2px solid purple;
   }
   .item{
   	width: 150px;
   	height: 150px;
   	background-color: green;
   }
   .allCenterChild{
   	margin: calc(50% - 75px) auto 0 auto; //居上50%-盒子的一般高度
   }

7. 第七种

   .wrap{
   	width: 600px;
   	height: 600px;
   	border: 2px solid purple;
       position: relative;
   }
   .item{
   	width: 150px;
   	height: 150px;
   	background-color: green;
   }
   .allCenterChild{
   	position: absolute;
   	left: 0;
   	right: 0;
   	top: 0;
   	bottom: 0;
   	margin: auto
   }

8. 第八种

   .wrap{
   	width: 600px;
   	height: 600px;
   	border: 2px solid purple;
       position: relative;
   }
   .item{
   	width: 150px;
   	height: 150px;
   	background-color: green;
   }
   .allCenterChild{
   	position: absolute;
   	left: 50%;
   	top: 50%;
   	transform:translate(-50%,-50%);
   }

9. 第九种

   .wrap{
   	width: 600px;
   	height: 600px;
   	border: 2px solid purple;
       position: relative;
   }
   .item{
   	width: 150px;
   	height: 150px;
   	background-color: green;
   }
   .allCenter{
   	display: table-cell;
   	vertical-align: middle;
   	text-align: center;
   }
   .allCenterChild{
   	display: inline-block;
   }

10. 第十种（只适用于一行内容）

    <div class="oneline">contents</div>
    

    .oneline{
    	width: 600px;
    	height: 200px;
    	background-color: pink;
    	line-height: 200px;
    	text-align: center
    }

    Ok！！！