How to use display to realize horizontal and Vertical centering in CSS
This article mainly introduces the relevant knowledge of "how to use display to achieve horizontal vertical center in CSS". The editor shows you the operation process through an actual case. The method of operation is simple and fast, and it is practical. I hope that this article "how to use display in CSS to achieve horizontal vertical center" can help you solve the problem.
Using the table-cell attribute value of display
1. Using display+vertical-align
The parent element sets the display: table-cell; and vertical-align: middle;, child elements set margin: 0 auto;.
Add a style:
.box {
Display: table-cell
Vertical-align: middle
}
.inner {margin: 0 auto;}
two。 Using display+vertical-align+text-align
The parent element is set to display: table-cell and the content is centered horizontally and vertically, and note that the child element is set to inline blocks.
Add a style:
.box {
Display: table-cell; / * this element will be displayed as a table cell * /
Vertical-align: middle; / * place this element in the middle of the parent element * /
Text-align: center
}
.inner {display: inline-block;}
This is the end of the content about "how to use display to achieve horizontal and vertical center in CSS". Thank you for your reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.
