How to Center Everything or Anything with CSS

How to Center Everything or Anything with CSS Demo

View Demo Full Screen View Demo New Tab

How to Center Everything or Anything with CSS Code

HTML

<p>This is the test div by its self.</p>
<div class="test-div">Hi im a test div</div>
<hr>
<p>This is the test div with the center class added.</p>
<div class="test-div center">Hi im a test div</div>

CSS

.test-div {
	padding:30px;
  	border-radius:10px;
  	background:purple;
  	color:#FFF;
  	min-height:200px;
}
.center {
  display: flex;
  align-items: center;
  justify-content: center;       
}