How to vertically center CSS text? 4 ways to achieve horizontal centering of CSS text

Currently, there are many ways to use CSS styles to center horizontally, but many people don’t know how to choose the CSS horizontal centering method. Below, our PHP Chinese website will summarize for you how to center CSS text horizontally and vertically? And 4 methods to achieve horizontal centering of CSS text.

Nowadays, it is not easy to use css to center text horizontally and vertically. Some novices are using css methods to achieve css centering, which is not available in browsers. The effect may be due to compatibility issues or some non-mainstream browsers. [Recommended reading: Using CSS to realize horizontally centered display of DIV]

1. Use absolute positioning combined with margin: auto

margin: auto Properties, there are four properties after margin, which are up, down, left and right. As long as we set margin to auto, we can center it horizontally first.

2. Use absolute positioning and use the transform attribute to achieve

The default value of transform is none, the effect is that transformation occurs, and the inherited value is no. The only advantage of using transform is that it does not You need to know the size of the element, and the percentage of the offset of the transform is relative to the size of the element.

3. Use the div in absolute positioning to center , set the top in the div to 50%, and set the margin-top to a negative value px. There is no need to set nested tags. More suitable for all browsers, but first you need to know the size to be centered.

4. The padding attribute can realize the centering of the element.

The padding attribute is actually to set the distance of the inner border and set the width of the top, bottom, left and right margins. This method is more practical Simply, as long as we set equal margins, vertical centering of the elements will occur.

The above is about how to achieve vertical centering of css text? A complete introduction to the 4 methods to achieve horizontal centering of CSS text. If you want to know more about CSS tutorial, please pay attention to the php Chinese website.

The above is the detailed content of How to vertically center CSS text? 4 ways to achieve horizontal centering of CSS text. For more information, please follow other related articles on the PHP Chinese website!