How to use location in css to realize the centering of boxes

This article mainly introduces css how to use positioning to achieve the center of the box, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let the editor with you to understand.

Using positioning to realize the center of the box

.outer {width: 300px; height: 300px; background-color: # fcfdcd; position: relative;} .inner {width: 100px; height: 100px; background-color: # 00ffcd; text-align: center; line-height: 100px; position: absolute; top: 50%; left: 50% / * since the positioning starts at the upper left corner of the element, you need to move half the size of the box up to the left * / margin-top:-50px; margin-left:-50px } Positioning Center Thank you for reading this article carefully. I hope the article "css how to use Positioning to achieve Box centering" shared by the editor will be helpful to everyone. At the same time, I also hope you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!