HTML和CSS中的居中效果（1）

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; 

} 

不固定高宽上下左右居中（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%; 

} 

不固定高宽上下左右居中（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%; 

}