Shulou(Shulou.com)06/02 Report--

This article mainly explains "how to set the horizontal vertical center of css text". The content of the explanation in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "how to set the horizontal vertical center of css text".

Css sets the text horizontal vertical center method: 1, add "{align-items:center}" style to the text element to make its horizontal direction center; 2, add "{justify-content:center}" style to the text element to make its vertical direction center.

The operating environment of this tutorial: windows7 system, CSS3&&HTML5 version, Dell G3 computer.

The method of setting the horizontal and Vertical Center of text by css

1. Create a new html file, named test.html, to explain how css centers text horizontally and vertically. Within div, use the span tag to create a line of text for testing. Set the class property of div to mydiv.

Within the css tag, set the width of the div through class to 200px, the height to 100px, and the border to 1px.

2. Within the css tag, set the display attribute to flex to achieve the flex layout, then set the align-items property to center (horizontal center) and the justify-content property to center (vertical center).

Open the test.html file in the browser to see the effect of the implementation.

Thank you for your reading, the above is "how to set css text horizontal vertical center" content, after the study of this article, I believe you on how to set css text horizontal vertical center of this problem has a deeper understanding, the specific use of the situation also needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.