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

HTML和CSS中的居中效果

 

单行上下左右居中

Html: 

<div class=”container”></div> 

CSS: 

.container{  

width: 600px; 

height: 300px; 

text-align: center; 

line-height: 300px; 

border: 1px solid green; 

} 

固定高宽上下左右居中

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; 

}

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

} 

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

}