Как по центру блока поставить блок с картинкой?

Question

[megazvero]

Как по центру блока по вертикали поставить блок с картинкой?

https://jsfiddle.net/n1tmy60a/

Comments

[frontend queen]

опиши точнее
какого враппера? контейнера или request__wrap? какой блок с картинкой? request__image, которого нет в разметке? или в скошенном before? а? у?
к слову, clip-path полигон лучше оформи через svg, иначе поддержка чахлая

[megazvero]

frontend queen, request__block по центру .request__bg

[frontend queen]

megazvero, такое?

.request__block {
	position: absolute;
	content: ' ';
	max-width: 450px;
	width: 100%;
	height: -webkit-calc(100%);
	height: calc(100%);
	background-image: url(https://klike.net/uploads/posts/2019-01/1547365376_1.jpg);
	-webkit-background-size: cover;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: top center;
	padding: 15px;
  
  margin: auto;
  top: 0; left: 0; bottom: 0; right: 0;
}

[megazvero]

frontend queen, не совсем
имелось вввиду по вертикали

сейчас же по горизонтали по центру
по вертикали нет
возможно это из-за clip-path

[frontend queen]

megazvero, не, это потому, что request__block центрируется относительно request__wrap, а у того высота нефиксированная

[megazvero]

frontend queen, так она мне там и не нужна фиксированная
можно как то еще поправить?

[frontend queen]

megazvero, возможно, я что-то упускаю, но у меня всё центрируется хорошо
попробуй для .request__wrap добавить height: 100%;

пример

[megazvero]

frontend queen, вот я выделил

[frontend queen]

megazvero, а, в этом плане. тут уже только подгонять, как мне кажется. если у тебя единицы относительные, то .request__bg:after, .request__bg:before height давать больше 100%, и top -20%

[Ankhena]

megazvero,

request__block по центру .request__bg

Он и так по центру.
Вот смотрите с рамочками https://jsfiddle.net/rz5qoLy2/

p.s. а еще я не верю в совпадения. Пишите с одного аккаунта.

[megazvero]

Ankhena, значит не совсем коректно выразился
расстояние 1 не равняется расстоянию 2
а в макете равно

[Ankhena]

megazvero, вспоминайте тригонометрию, угол знаете, катет почти знаете (ширина блока - ширина картинки). Со вторым треугольником симметрично.
Вычисляете среднее арифметическое и задаете его в сдвиг (трансформом, марджином или еще чем больше нравится) через js.
А может и через чистый calc получится.

[megazvero]

Ankhena, тоесть как вариант можно просто тому блоку справа задать margin-top:
к примеру

и это не будет костылем?

[Ankhena]

megazvero, если будете считать тангенсы на js, то двигать абсолютно-позиционированные блоки margin-top'ом будет костылем, потому что проще сразу задать вычисленное в top.

Вообще смотрите по тому, что происходит при разной ширине окна с этими блоками по задумке дизайнера. Может проще треугольники по-другому рисовать.
Что с высотой блока я тоже не знаю. Может, там слева текст причем возможно изменяемой высоты.
В зависимости от этого и решение.

А еще смешно, кому-то выше вы показываете стрелками что должно быть одинаковым расстояние сначала справа от картинки, а мне потом, что слева.
Вы меня извините, но так не бывает )))))

[megazvero]

Ankhena, ну значит некоректно показал
признаю
извините

[megazvero]

Ankhena,
вы показываете стрелками что должно быть одинаковым расстояние сначала справа от картинки, а мне потом, что слева.

___________
а принципиальная разница? главное что суть то понятна)))))

[Ankhena]

megazvero,

а принципиальная разница?

Разница в том, что не может быть одновременно одинаково справа и одинаково слева.