Центрирование по оси Y html div

Question

У меня есть два боковых делителя ВЛЕВО и ВПРАВО

<div class = "left">
  <div class = "content">
    ...
  </div>
</div>

<div class = "right">
  <div class = "content">
    ...
  </div>
</div>

, и мне нужно расположить их по оси y, я знаю, как центрировать левую сторону, но тот же метод не работает для правой стороны

.left {
    float: left;
    width: 26%;
    border: 2px solid red;
    position: absolute;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

Answer 1

Плавающее их не собирается выровнять их по вертикали, и позиционирование их как абсолютного может работать в зависимости от того, к чему они относятся, позиция родительского элемента: относительная?

Установите родительский элемент следующим образом:

.parent-element {
   display: flex; 
   justify-content: space-between; 
   }

Пока ширина каждого элемента меньше 100% ширины контейнера, они будут выровнены рядом друг с другом по центру.

Также попробуйте пробел вместо пробела, который будет равномерно распределять пространство между границами элементов (родительский элемент против child-element1 против child-element 2).