How CSS implements horizontal vertical centering and aligned code sharing

Single Line Vertical Center

Single-line vertical centering can be done directly with Line-height=width

<p  style= "width:100px;height:100px;line-height:100px;" ><span>hello world</span></p>

So the text Hello World is vertically centered, and if you want the entire p to be centered in the parent element, a layer of p is nested outside and is implemented by the margin of P inside.

<p style= "position:relative;width:400px;height:200px;" ><p class= "element" style= "width:50%;height:50%;line-height:100px;" ><span>hello world</span></p></p>.element {   position:absolute; left:0; top:0; Right: 0; bottom:0;   Margin:auto 0;}

Multi-line Vertical centering

Multi-line Vertical center words can not be used line-height. Need to Display:table-cell the p, then vertical-align:middle;

<p class= "Twoclass" > Hello time Hello time hello time </p>.twoClass{display:table-cell; width:200px; height:200px; Vertical-align:middle;}

In fact, this method is feasible for vertical centering of single line.

Center horizontally

For the horizontal center of the text, as long as the text-align:center; if you center the positive p, you need to set the Margin-left margin-right of P to auto

<p style= "position:relative;width:200px;height:200px;" ><p class= "element" style= "width:50%;height:50%;text-align:center;line-height:100px;" > Hello time </p></p>.element {   position:absolute; left:0; top:0; right:0; bottom:0   ; Margin:auto Auto;}

This demo implements the horizontal vertical centering of p and text.

Justify on both sides

For multi-line text justification, only text-align:justify is required.

<p style= "position:relative;width:100px;height:400px;text-align:justify;" >hello World He hello Worid hello worlds Hello world Hello worlds he hello world he hello worlds Hello world Hello World He Hello worlds he &l T;/p>

It is important to note that the last line of this multiline text is not justified.

If you want to work on the last line, you can use text-align-last:justify; However, there are compatibility issues.

Justify a single line

<p style= "width:400px;text-align-last:justify;" > I'm so handsome </p>

I didn't think of a text-align-last:justify, but I realized it (chrome), but it didn't work in IE browser ...

Here's a couple of a-label from the internet. Justify

. demo{text-align-last:justify;     line-height:0; height:44px;}.     Demo a{width:20%;     Display:inline-block;     height:44px;     line-height:44px; Text-align:center;} Line breaks between elements in the <p> module </p><br/><p class= "Demo" > <a class= "link" href= "#none" >10 Meta </a> & Lt;a class= "link" href= "#none" >20 yuan </a> <a class= "link" href= "#none" >30 meta </a> <a class= "link" hr ef= "#none" >50 elements in the &LT;/A&GT;&LT;/P&GT;&LT;BR/><p> module are space characters </p><br/><p class= "Demo" ><a class= "link" href= "#none" >10 yuan </a> <a class= "link" href= "#none" >20 meta </a> <a class= " Link "href=" #none ">30 </a> <a class=" link "href=" #none ">50 yuan </a></p><br/><p> There is no delimiter between elements within the module, justify does not work </p><br/><p class= "demo" ><a class= "link" href= "#none" > Options 1</a ><a class= "link" href= "#none" > Options 2</a><a class= "link" href= "#none" > Options 3</a><a class= " Link "HRef= "#none" > Options 4</a></p>