首页 > 代码库 > HTML和CSS中的居中效果（1）
HTML和CSS中的居中效果（1）
单行上下左右居中
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%;
}
HTML和CSS中的居中效果（1）