html - How do I vertically center text with CSS? -

I have a div element in which the text is, and I want to align the content of this div in the vertical center.

This is my div style:

  #box {height: 170px; Width: 270px; Background: # 000; Font-size: 48px; Color: #fff; Text align: center; }  

  & lt; Div id = "box" & gt;     
 
 What is the best way to do this?   
 
 
 You can try this basic approach:  
 
 
 
  Div {height: 90px; Line-height: 90px; Text align: center; Border: 2px dashed # f69c55; }  
 
  & lt; Div & gt; Hello world! & Lt; / Div & gt;  
 
 
 
 
 This works only for a line of text, because we set the height of the line to the same height, with the box element . 
 
 
 A more versatile approach 
 
 This is another way of vertically aligning text to each other. This solution will work for one line and several lines of text, but still need a fixed height container for it: 
 
 
 
 
  Div {height: 200px; Line-height: 200px; Text align: center; Border: 2px dashed # f69c55; } Period {Performance: Inline-Block; Vertical-row: middle; Line-height: Normal; }  
 
  & lt; Div & gt; & Lt; Span & gt; Advertising for advertising tells you about your and your things, there is no good option for this but animals are also there. & Lt; / Span & gt; CSS just  , vertical center aligns  
 
 
 code & gt; & Lt; Span & gt;   
 gt; & Lt; Div & gt;  is equal to its height, and  & lt; Span & gt; - Block with an inline -  vertical-align: medium . Then this line-height is  & lt; Span & gt;  sets back to normal, so its content will flow naturally inside the block. 
  
 Simulation of table display 
 
 And here's another option, which can not work on older (basically just Internet Explorer 7). Using CSS, we simulate table behaviors (supporting vertical alignment from tables), and HTML is similar to another example: 
 
 
 
 
  div {display: table; Height: 100 pixels; Width: 100%; Text align: center; Border: 2px dashed # f69c55; } Period {Performance: Table-Cell; Vertical-row: middle; }  
 
  & lt; Div & gt; & Lt; Span & gt; Advertising based on website, editing adipiscing elite & Lt; / Span & gt; & Lt; / Div & gt;  
 
 
 
 
 
 use of full position 
 
 This technique uses the set element at one absolutely set element , Down, left and right with 0. This smashing magazine,  . 
 
  is described in more detail in an article.