居中，等高，负边距
程序员文章站
2022-06-14 14:51:53
...
一些常用的基本样式总结
当由内容撑开的div水平垂直居中
<style>
* {
padding:0px;
margin:0px;
}
.contianer {
width: 600px;
height: 300px;
border: 1px solid red;
position:relative;
}
.item {
background-color: gray;
position: absolute;
top:50%;
left: 50%;
transform:translate(-50%,-50%); //X Y 这个是相对于自身的50%
}
</style>
<body>
<div class="contianer">
<div class="item">jhgfds</div>
</div>
</body>等高
<style>
.contianer {
border: 1px solid black;
overflow: hidden;
margin-bottom: 30px;
}
.box {
float:left;
width:33.3333333%;
background-color: gray;
/* padding-bottom:1200px;
margin-bottom: -1200px;*/
}
</style>
<body>
<div class="contianer">
<div class="box">
fefe <br/>
fefe <br/>
fefe <br/>
fefe <br/>
fefe <br/>
</div>
<div class="box">
gge <br/>
gge <br/>
gge <br/>
</div>
<div class="box">gfd</div>
</div>
</body>上一篇： 一个完整的图片上传php类
下一篇： 使用负边距