CSS instances: multiple solutions for horizontal and vertical centering

1, single-line vertical center

Text is centered vertically in the Layer Vertical-align property is not available. Here's a neat way to do this: set height to the same height as Line-height!

Example Source Code [Www.52css.com]<div style= "line-height:500px;height:500;" ></div>

2. Horizontal center of Layer

Set the width of the div to be less than the width of the parent div, set margin:0 auto, and let the div center.

Example Source Code [www.52css.com] #parentdiv {width: 500px;}  {width: 200px;  Margin:0 auto;}

3. The text in the layer is centered horizontally

In the childdiv CSS plus text-align:center;

Example Source Code [www.52css.com] #parentdiv {width: 500px;}  {width: 200px;  Margin:0 Auto; text-align:center;}

4, DIV layer Vertical Center

Example Source Code [www.52css.com]<div style= "Width:275px;height:375px;border:solid red;" > <div style= "background:green;height:375px; width:275px; position:relative; Display:table-cell; Vertical-align:middle; " > <div style= "background:red;position:static;position:absolute\9; top:50%; " >        <div style= "background:blue;position:relative; top:-50%;" >                     www.52css.com         </div>      </div>   </div></div>

5, div layer Vertical Horizontal center, English super long line-wrapping

Example Source Code [www.52css.com]<div style= "Float:left;width:275px;height:375px;border:solid red;" >    <div style= "height:375px; width:275px; position:relative; display:table-cell; vertical-align:middle;" >          <div style= "position:static;position:absolute\9; top:50%;" >              <div style= "position:relative; top: -50%; text-align:center;" >                  <div style= "width:85px; Word-wrap:break-word; table-layout:fixed;word-break:break-all;margin:0 auto; " >            www.52css.comwww.52css.comwww.52css.comwww.52css.comwww.52css.comwww.52css.comwww.52css.com               </ div>              </div>          </div>    </div></div>

6, Div vertical scrolling

Example Source Code [Www.52css.com]<div style= "width:160px; height:260px; OVERFLOW-Y: scroll; BORDER:1PX solid; " ></div>

7. Center vertically and horizontally using text-align

Example Source Code [www.52css.com]<div style= "Float:left;width:275px;height:375px;border:solid red;" > <div style= "height:375px; width:275px; position:relative; Display:table-cell; Vertical-align:middle; " > <div style= "position:static;position:absolute\9;top:50%;" >           <div style= "position:relative; top: -50%; text-align:center;" > <div style= "width:275px;" >                      <div style= "width:160px; Word-wrap:break-word; Table-layout:fixed;word-break:break-all;text-align:left; " >            www.52css.comwww.52css.comwww.52css.comwww.52css.comwww.52css.comwww.52css.comwww.52css.com             &l t;/div>              </div>           </div> </div> </div></div>

8. Center vertically and use margin horizontally

Example Source Code [www.52css.com]<div style= "Float:left;width:275px;height:375px;border:solid red;" > <div style= "height:375px; width:275px; position:relative; Display:table-cell; Vertical-align:middle; " > <div style= "position:static;position:absolute\9; top:50%; " >           <div style= "position:relative; top:-50%; ">           <div style=" margin:0 auto;width:160px; Word-wrap:break-word; Table-layout:fixed;word-break:break-all; "　　　　 >           Www.52css.comwww.52css.comwww.52css.comwww.52css.comwww.52css.comwww.52css.comwww.52css.comwww.52css.com              </div>           </div>       </div>   </div></div>

CSS instances: multiple solutions for horizontal and vertical centering