DIV元素垂直居中
定位垂直居中
<body>
<div class="父元素" >
<div class="子元素"></div>
</div>
</body>
<style>
#父元素{position: relative;} //定位
#需要居中得div元素{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 50%;
height: 30%;
margin: auto;
};
</style>
定位垂直居中
<body>
<div id="父元素">
<div id="子元素">Content here</div>
</div>
</body>
<style>
#父元素{position: relative;} //定位
#需要居中得div元素{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 50%;
height: 30%;
margin: auto;
};
</style>
padding垂直居中
<body>
<div id="父元素">
<div id="子元素">Content here</div>
</div>
</body>
<style>
#父元素{
padding: 5% 0;
};
#子元素 {
padding: 10% 0;
};
</style>
display: table垂直居中
<body>
<div id="父元素">
<div id="子元素">Content here</div>
</div>
</body>
<style>
#父元素{
height: 200px;
width:200px;
display: table;
};
#子元素 {
display: table-cell;
vertical-align: middle;
};
</style>
Floater 垂直居中
<body>
<div id="parent">
<div id="floater"></div>
<div id="child">Content here</div>
</div>
</body>
<style>
#parent {
height: 250px;
};
#floater {
float: left;
height: 50%;
width: 100%;
margin-bottom: -50px;
};
#child {
clear: both;
height: 100px;
};
</style>
扫一扫
6239
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
