Centering vertically, like?

Hello.
Please help solve the problem.
We have a header which is a picture with the logo and the vertical menu. the header is set to: position:
fixed; left: 0; top: 0; width: 100%; z-index: 10;

next we have a main which has a slider made swiper. each slide has the content ( left block h1 + p + button ) with the right picture.

Since we have the header has a fixed position - the slider goes under the header and all becomes as it should, but the problem in fact that you need to center the content inside the slider ( the left text block, and right image ) in the center ( using Flex ), the problem is that the centering occurs from the top of the screen, and you need that from the bottom of the header which is our logo+ menu.
July 8th 19 at 11:52
1 answer
July 8th 19 at 11:54
So add margin-top client, and all will be OK

Upd:
codepen.io/anon/pen/xOgyLm
The fact of the matter is that we need to do everything without vertical marginal/paddingon. =) - raquel_Jaco commented on July 8th 19 at 11:57
why? - beatrice_Hamill1 commented on July 8th 19 at 12:00
If no marginal, it will not be "vertical alignment". Either margin or fixed to remove - beatrice_Hamill1 commented on July 8th 19 at 12:03
: I don't know at work said so=) said to align an element vertically using either tables and vertical alignment, or with the help of Flex, but the problem is that the alignment comes from the top of the page instead of from the bottom of the header =) - raquel_Jaco commented on July 8th 19 at 12:06
: so ask why) some Nonsense really. Put a buck on something that does not normally get to do) - beatrice_Hamill1 commented on July 8th 19 at 12:09
: on the table easier , vertical-align also ? - Caesar.Keeli commented on July 8th 19 at 12:12
: on Flex easier) - beatrice_Hamill1 commented on July 8th 19 at 12:15
Said they say, aligned vertically with the vertical padding and margins - is not correct. It is correct to use either the Flex, or using vertical-align. I used to do everything through the vertical field, now I sit and can't understand how to do everything "right"... although this "right" I do not quite understand the accuracy that way, and not the correctness Cereus vertical margins and padding. - raquel_Jaco commented on July 8th 19 at 12:18
Yes, and the Flex is not difficult and for vertical-align also - Caesar.Keeli commented on July 8th 19 at 12:21
looks like you misunderstood. Think meant the wrong way on the type
position: absolute;
top: 50%;
height: 100px;
margin-top: -50px; - beatrice_Hamill1 commented on July 8th 19 at 12:24
Ie in the case of centering with the help of Flex and top margin centering will go with the help of Flex, and the starting point of centering is set with the indent) - beatrice_Hamill1 commented on July 8th 19 at 12:27
: No, not that I did before ( well, I'm a Junior, I studied myself =) ) I saw the layout of an element, measured out from the top indent ( simmered 220px, and wrote margin-top: 220px ) I was told that to do so is wrong, and you need these items to center with 1. using vertical-align, or 2. with the help of Flex. How to do it I thought I knew, and understood, but the layout of the task is that you need to center a block of content starting from the lower border of the header ( which has the logo and menu ) but I have somehow obtained the alignment from the top border of the window.
Here's the picture better will be clearer, it can be seen that the centering comes from the top, and it is necessary from the red line. i.imgur.com/bAOi1HX.jpg =) - raquel_Jaco commented on July 8th 19 at 12:30
: codepen.io/anon/pen/xOgyLm - beatrice_Hamill1 commented on July 8th 19 at 12:33
Thanks, interesting solution. =) - raquel_Jaco commented on July 8th 19 at 12:36

Find more questions by tags CSSAdaptive design