div 요소의 토글 버튼을 가운데 정렬하는 방법은 무엇입니까?

Question

내 요소 "Client_name"의 토글 버튼을 중앙 정렬하고 싶습니다. 다른 div를 만들었지만 버튼을 아래로 내려 오른쪽에 배치할 수 없습니다. 어떤 아이디어가 있나요?

jsfiddle 링크는 아래에 있습니다

https://jsfiddle.net/6cyuwxvf/

.switch {
  position: relative;
  display: inline-block;
  width: 73px;
  height: 32px;
}

.switch input {display:none;}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #CD3B1B;
  -webkit-transition: .4s;
  transition: .4s;
   border-radius: 34px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
  border-radius: 50%;
}

input:checked + .slider {
  background-color: #89C445;
}

input:focus + .slider {
  box-shadow: 0 0 1px #89C445;
}

input:checked + .slider:before {
  -webkit-transform: translateX(86px);
  -ms-transform: translateX(36px);
  transform: translateX(38px);
}

.button10 {
  background-color: white; 
  color: black; 
  border: 2px solid;
  width: 500px;
  height: 50px;
  
}

.div-permission {
  display: table-cell;
  vertical-align: middle;
  height: 45px;
  width: 900px;
  border: 1px solid red;
}

Answer 1

display: flex;和align-items: center;를 사용하여 수직 정렬을 수행하고 스위치에 약간의 여백을 추가할 수 있습니다.

으아악 으아악