Home  >  Article  >  Web Front-end  >  CSS layout problem_html/css_WEB-ITnose

CSS layout problem_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 12:06:34826browse

If the size of the parent container is unknown and the size of the child elements is unknown, how can the child elements be vertically centered relative to the parent container?


Reply to discussion (solution)

How could this situation happen? The width and height of the parent container are unknown, which means there is content to hold it open. Since the content is also held open, why is it vertically centered?

You can only use js to dynamically obtain the height of the container, and then position the child container

The parent element sets equal padding-top and padding-bottem values ​​

For the parent The size of the container is unknown, and the size of the child elements is unknown. How to make the child elements vertically centered relative to the parent container?
The layout of the parent element cannot be modified without using JS

If the size of the parent container is unknown and the size of the child element is unknown, how to make the child element vertically centered relative to the parent container?
You cannot modify the layout of the parent element without using JS
The child container is included in the parent container. Set the style of the child container margin:auto; try this, but if the parent container is smaller than the child container, I don’t know what will happen.

This question is a bit like Tencent’s front-end online test question, the front-end commando.
Use the following to ensure horizontal and vertical centering:
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;

This question is a bit like Tencent’s front-end online test question, the front-end commando.
Use the following to ensure horizontal and vertical centering:
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
In this method, it is impossible to center the child element if the height and width are not fixed. You can try it.


This question is a bit like Tencent’s front-end online test question, that front-end commando.
Use the following to ensure horizontal and vertical centering:
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
In this method, it is impossible to center the child element if the height and width are not fixed. You can try it.
That’s the topic. Thank you

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn