Center div inside another div horizontally

You need to use margin: 0 auto; for inner div. It will automatically center align inner div according to the width of outer div.

Source Code:

<style>
	.outer-div {
		background-color: rgba(0, 0, 0, 0.5);
		padding: 50px 0;
		width: 100%;
	}
	.inner-div {
		background-color: #fff;
		width: 200px;
		height: 300px;
		margin: 0 auto;
	}
</style>

<div class="outer-div">
	<div class="inner-div"></div>
</div>

Live Preview