Почему блок слайдере не по середине?

Question

Иван @Captain96

HTML
CSS

Почему блок слайдере не по середине?

На 3 странице слайдера нужно чтобы синий блок был по середине, как это сделать?

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="javascript.js"></script>
<title>Страница</title>
</head>
<body>

<div class="wrapper">
<div class="wrapper-slider">

<input type="radio" id="btn-1" name="button1" checked>
<input type="radio" id="btn-2" name="button1">
<input type="radio" id="btn-3" name="button1">
<input type="radio" id="btn-4" name="button1">

<div class="labels-b">
<label class="label-b" for="btn-1"></label>
<label class="label-b" for="btn-2"></label>
<label class="label-b" for="btn-3"></label>
<label class="label-b" for="btn-4"></label>
</div>

<div class="slider">
<li class="slider-block-1"></li>
<li class="slider-block-2"></li>
<li class="slider-block-3">

<span class="block-buy">123</span>


</li>
<a href="https://mail.ru/"><li class="slider-block-4"></li></a>
</div>
</div>
</div>


</body>
</html>

* {
	margin: 0px;
	padding: 0px;
}
.clearfix::after {
	content: "";
	display: table;
	clear: both;
}
.wrapper {
	width: 1000px;
	height: 2000px;
	margin: 0px auto;
	background: yellow;
	
}
.wrapper-slider {
	overflow: hidden;
}
.slider {
	margin: 0px;
	padding: 0px;
	width: 4000px;
	height: 200px;
	overflow: hidden;
	transition: 0.3s;
	font-size: 0px;
}
.labels-b {
	display: block;
    text-align: center;
	background: none;
}
.label-b {
	width: 15px;
	height: 15px;
	border-radius: 35%;
	background: gray;
	display: inline-block;
	margin: 50px 15px 10px 15px;
	border: 4px solid green;
}
.label-b:hover {
	background: #fff;
	transition: 0.3s;
}
.wrapper input[type="radio"] {
	display: none;
}
.slider-block-1 {
	display: inline-block;
	width: 1000px;
	height: 200px;
	background: #B25757;
}
.slider-block-2 {
	display: inline-block;
	width: 1000px;
	height: 200px;
	background: none;
	background-image: url("images/1.jpg");
}
.slider-block-3 {
	display: inline-block;
	width: 1000px;
	height: 200px;
	background: #B2B257;
}
.slider-block-4 {
	display: inline-block;
	width: 1000px;
	height: 200px;
	background: #5764B2;
}
#btn-1:checked ~ .slider {
	transform: translateX(0px);
}
#btn-2:checked ~ .slider {
	transform: translateX(-1000px);
}
#btn-3:checked ~ .slider {
	transform: translateX(-2000px);
}
#btn-4:checked ~ .slider {
	transform: translateX(-3000px);
}
#btn-1:checked  ~ .labels-b  .label-b[for="btn-1"] {
	background: red;
}
#btn-2:checked  ~ .labels-b  .label-b[for="btn-2"] {
	background: red;	
}
#btn-3:checked  ~ .labels-b  .label-b[for="btn-3"] {
	background: red;
}
#btn-4:checked  ~ .labels-b  .label-b[for="btn-4"] {
	background: red;
}
#btn-1:checked  ~ .labels-b  .label-b[for="btn-1"],
#btn-2:checked  ~ .labels-b  .label-b[for="btn-2"],
#btn-3:checked  ~ .labels-b  .label-b[for="btn-3"],
#btn-4:checked  ~ .labels-b  .label-b[for="btn-4"] {
	transition: 0.3s;
}
.slider-block-3 .block-buy {
	position: absolute;
	width: 300px;
	height: 150px;
	background: blue;
	font-size: 30px;
	color: white;
	margin: 25px auto;
}