3 ways to center a div

Today I encountered a problem that everyone knows but may not remember clearly
1.margin

.father{
    		width:400px;
    		height:400px;
    		background:black;
    		margin: 0 auto;
    	}	

2. Relative positioning and displacement

.father{
		width:400px;
		height:400px;
		background:black;
		position: relative;
		left: 50%;
		transform: translate(-50%)
	}

3. Relative positioning

father{
	width:400px;
	height:400px;
	background:black;
	position: relative;
	left: 50%;
	margin-left:-200px;
}	

Remember