Css/css3 implements vertical and horizontal center of unknown width and height elements, csscss3
In fact, in some common la s, it is often necessary to realize vertical and horizontal center of elements, the following describes the horizontal and vertical Centering of unknown wide and high elements implemented by css/css3.
Ps: compatibility is not considered (the next time Javascript is written to implement horizontal and vertical center of elements)
FirstCss3 transform
. Ele {/* set the absolute position of the element */position: absolute;/* top 50% */top: 50%;/* left 50% */left: 50%; /* css3 transform implementation */transform: translate (-50%,-50% );}
SecondFlex box Layout
. Ele {/* elastic Box Model */display: flex;/* spindle center alignment */justify-content: center;/* side axis center align-items: center ;}
ThirdDisplay table-cell
. Box {/* render the element as a table cell */display: table-cell;/* set the horizontal center of text */text-align: center; /* set text vertical center */vertical-align: middle ;}
The third is to add a style to the parent level. Write these types first, so you can use them. You can also use pseudo classes to achieve the center effect. If you are interested, you can try it by yourself.