How to achieve horizontal centering of div content and vertical centering of div content
This article mainly explains the "div content horizontal center and div content vertical center how to achieve", the article explains the content is simple and clear, easy to learn and understand, the following please follow the editor's ideas slowly in depth, together to study and learn "div content horizontal center and div content vertical center how to achieve" it!
The mode within the div is centered:
Form is equally divided into the horizontal center of div content and the vertical center of div form.
Div form level center compared to the structure div center, and div mode center is relatively simple, only need to set a form center css (text-align:center), form vertical center (line-height).
1. The form of div is in the middle. CSS:
Text-align:center
Whether it is p or div, it is possible to configure this CSS to center the level of form within the corresponding object.
2. Vertical center row height attribute of div mode:
Line-height
To center vertically in the form of only one line in the div, the height (height) set to the div is usually the same as the line-height (line height), and the div content can be centered vertically.
3. Div mode horizontal center and vertical center example code
Div mode centered instance CSS5#juzhong {width:320px;height:100px; line-height:100px; text-align:center; border:1px solid # F00} text-align and line-height configuration are centered horizontally and vertically
4. Screenshot
Div content level centered and div content vertically centered structure example
From the image above, you can roughly see that the div content implementation is in the middle of both cases, but margin:0 auto is not set and div is not in the middle.
Thank you for your reading, the above is the "div content horizontal center and div content vertical center how to achieve" the content, after the study of this article, I believe you on the div content horizontal center and div content vertical center how to achieve this problem has a deeper understanding, the specific use of the need for everyone to practice and verify. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!
