markvasyliev

Сначала сверстайте на html/js/css базовую страницу вашего будущего сайта.
Затем создайте в Друпале папку с Вашей новой темой и .info файл - это необходимый минимум.
далее в папку добавляете все файлы вашей страницы, а сделанные .html файлы переписываете в соответствующие .tpl.php в соответствии с Drupal API files.
Начните изучать темизацию с этой страницы

Зачем для этого вообще позиционирование?
https://jsfiddle.net/e1r0zojL/
Или флексами.

Если все таки очень хочется позиционированием, то центр это:

left: 50%;
transform: translateX(-50%);

Вертикальное позиционирование при этом разумнее считать снизу, а не сверху. Вдруг текста будет на 2 строки?

Это легко делаеться через псевдоелементы. Что я имею ввиду: Желтый квадрат на самом деле имеет бордер (обводку) только с трех сторон, четвертая же сделана визуальными елементами, которые позиционируються абсолютом

.квадрат {
position: relative; // или absolute
border: 4px solid yellow;
border-left: none;
width: ...;
height: ...;
}
.квадрат::before, .квадрат::after {
  content: "";
  position: absolute;
  left: 0;
  width: 4px;
  background: yellow;
}
.квадрат::before {
  top: 0;
  height: ...;
}
.квадрат::after{
  bottom: 0;
  height: ...;
}