<div class="center"> <input type="checkbox"> </div>
.center { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } input { &[type="checkbox"] { position: relative; width: 80px; height: 40px; background: #ccc; outline: none; border-radius: 20px; -webkit-appearance: none; -moz-appearance: none; appearance: none; &:before { content: ''; position: absolute; width: 36px; height: 36px; border-radius: 20px; top: 2px; left: 2px; background: #fff; -webkit-transition: .2s; -moz-transition: .2s; -ms-transition: .2s; -o-transition: .2s; transition: .2s; } &:checked { background: #03a9f4; &:before { left: 42px; } } } }