Summary of 7 ways to vertically center divs

In our daily web development, we often use CSS and DIV for layout to make the page more beautiful and provide a better experience. So how to make the div display in various centered ways? Below we will explain Let’s summarize the method of vertically centering divs in detail.

CSS methods to achieve vertical centering of divs:

1.CSS Tutorial: Multiple methods of vertically centering divs

When talking about this problem, someone may ask if there is no vertical-align attribute in CSS to set vertical centering? Even if some browsers don't support it, I only need to do a little CSS Hack technology! So I have to say a few words here. There is indeed a vertical-align attribute in CSS, but it only takes effect on elements with valign attributes in (X)HTML elements, such as

, , , etc. Elements like

, do not have valign attributes, so using vertical-align will not work on them.

2.CSS text and div vertical centering method example analysis

In style layout, we We often encounter the need to center elements. It is relatively simple to achieve horizontal centering of elements through CSS: for text, you only need to set text-align: center; for its parent element, and for block-level elements such as p, you only need to set the margin values ​​​​of its left and right to auto. To achieve vertical centering of elements, some people will think of the vertical-align attribute in CSS, but it only takes effect on elements with valign attributes, such as

, , , etc. in table elements. , and elements like

and do not have the valign attribute, so using vertical-align will not work on them. Therefore, we need to use other methods to achieve vertical centering of elements. Below I have summarized several commonly used vertical centering methods.

3.[Front desk] css control DIV vertical centering

Because at this time the browser will use the position shown as the green dot in the picture. The default location. To center the content, set margin-left and margin-top to negative half width and half width respectively.

2. Center the div horizontally and vertically:

##1.Use CSS to achieve horizontal and vertical centering of divs

There are many solutions to achieve centering. This article mainly introduces the solution of pure CSS using absolute and margin. , margin-top is -(height / 2), margin-left is -(width / 2). Of course, you can not use margin, that is, top is calc(100% - height) / 2, left is calc(100% - width) / 2, but it is recommended not to use calc() if you don't need it.

2.css to achieve horizontal and vertical centering of DIV on the screen

css How to achieve full-screen horizontal and vertical centering of p. This chapter introduces how to A p element achieves the horizontal and vertical centering effect within the entire web page. The code is the most convincing. Just look at the code directly.

Related questions and answers about div vertical centering:

##1.css3 - How to center the content in a div horizontally and vertically?

2.css - How to center div horizontally and vertically in UC mobile browser?

##【div vertical centering related Article】

1.css image centering: css image centering up, down, left, and right (centered horizontally and vertically)

2.div centering: summary of the most comprehensive div centering method

3. CSS centering: The most comprehensive collection of CSS centering methods

The above is the detailed content of Summary of 7 ways to vertically center divs. For more information, please follow other related articles on the PHP Chinese website!