An implementation method of CSS3 Vertical Center

Source: Internet
Author: User
Tags wrapper

The translate () function moves the element in the specified direction, similar to the relative in position. Or, in simple terms, using the translate () function, you can move an element from its original position without affecting any Web component on the x or Y axis.

1. top:50%,left:50%, the upper left corner of the color block is positioned in the center of the screen, but the whole is not in the center;

2. The percentage of translate is determined according to its width and height, translate ( -50%,-50%) Coordinate with top:50%,left:50% to achieve the center

The following is a search on the internet for translate and position:

Same point: Both are relative to their own mobile position


1, when the element has already position:absolute, at this time you want to move relative to itself, you can use translate

2, do animation time translate more suitable, will not cause the page rearrangement and redraw

3, regarding the transform class, can use the GPU acceleration, enhances the browser the performance. In short: Transform more suitable for animation


<! DOCTYPE html>

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.