Center image

by Van Hai Le

HTML

<div class="mask">
<img src="https://images.unsplash.com/photo-1545671536-16a1d89c38b8?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=100&h=50&fit=crop&ixid=eyJhcHBfaWQiOjF9" alt="">
</div>

CSS

.mask {
	height: 150px;
	width: 150px;
	border-radius: 50%;
	overflow: hidden;
	position: relative;
/* background: url('https://images.unsplash.com/photo-1545154034-aaa7c0047dd8?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=150&h=50&fit=crop&ixid=eyJhcHBfaWQiOjF9') no-repeat;
	background-size: cover;
	background-position: center; */
}

.mask img {
	position: absolute;
	height: 150px;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}