Centering effects in HTML and CSS (1)

Single line up or down center

Html:

<div class= "Container" ></div>

Css:

. container{

width:600px;

height:300px;

Text-align:center;

line-height:300px;

border:1px solid Green;

}

Fixed high width up or down center

Html:

<div class= "container" ><div class= "content" ></div> </div>

Css:

. container{

border:1px solid Green;

width:600px;

height:300px;

position:relative;

}

. content{

Background:black;

height:200px;

width:200px;

Position:absolute;

left:0;

bottom:0;

right:0;

top:0;

Margin:auto;

}

Not fixed high width up or down center (1)

Html:

<div class= "container" ><div class= "content" ></div> </div>

Css:

. container{

border:1px solid Green;

width:600px;

height:300px;

line-height:300px;

Text-align:center;

}

. content{

Display:inline-block;

Line-height:normal;

Vertical-align:middle;

Resize:both;

Overflow:auto;

}

10

Css:

. container{

width:600px;

height:300px;

Text-align:center;

}

. container:after/:before{

Content: "";

Display:inline-block;

Vertical-align:middle;

height:100%;

}

. content{

Display:inline-block;

Vertical-align:middle;

Resize:both;

Overflow:auto;

}

Not fixed high width up or down center (5)

Html:

<div class= "Container" >

<div class= "Content" >

</div>

</div>

Css:

. container{

width:600px;

height:300px;

position:relative;

border:1px solid Green;

}

. content{

Position:absolute;

Transform:translate ( -50%,-50%);

top:50%;

left:50%;

}

Not fixed high width up or down center (6)

Html:

<div class= "Container" >

<div class= "Temp" >

<div class= "Content" >11 </div>

</div>

</div>

Css:

. container{

width:600px;

height:300px;

border:1px solid Green;

}

. temp{

width:600px;

height:300px;

Transform:translatey (50%);

}.temp{

Float:left;

Transform:translate ( -50%,-50%);

margin-left:50%;

}

Centering effects in HTML and CSS (1)