How css uses transform to align vertically

Xiaobian to share with you how to use css transform vertical alignment, I believe most people still do not know how, so share this article for everyone's reference, I hope you have a lot of harvest after reading this article, let's go to understand it together!

description

1. Use transform to align vertically from single-line text, paragraphs to boxes.

The translate attribute can change the position of the element, translateX(10px) moves the x axis 10 units, and if it is negative, it moves in the opposite direction.

Similarly, translateY can achieve a displacement along the Y axis;transform:translate(-50%,-50%) means to move the element along the x axis by 50% of its width (negative opposite direction) and then along the y axis by 50% of its height (negative opposite direction).

examples

.verticalcenter{ position: relative; top: 50%; -webkit-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%);} The above is "how to use transform vertical alignment of css" all the content of this article, thank you for reading! I believe that everyone has a certain understanding, hope to share the content to help everyone, if you still want to learn more knowledge, welcome to pay attention to the industry information channel!