Line-Height Method
<style type="text/css">
.child {
line-height: 200px;
background-color: pink;
}
.parent {
line-height: 200px;
background-color: pink;
margin-top: 20px;
}
.parent img {
width: 100px;
vertical-align: middle;
}
.parent:before {
content: "";
display: inline-block;
height: 100%;
vertical-align: middle;
}
</style>
</head>
<body>
<div>
<div class="child">Text here</div>
</div>
<!-- 图片的垂直居中 -->
<!-- 注：该方法的重点在于 line-height 的高度等于块级元素的内容框高度（一般都是指 height 值） -->
<!-- line-height 的垂直居中不是纯粹的垂直居中，会有点差异，需要调节 vertical-align -->
<div class="parent">
</div>
</body>
CSS Table Method
<style type="text/css">
.parent {
display: table-cell;
vertical-align: middle;
/* 注：vertical-align: middle 这个属性一般情况下只对行内元素生效，对块级元素只有 table-cell 生效。 */
/* 低版本 IE fix bug： */
/*display: inline-block;*/
height: 200px;
background-color: pink;
}
.child {
background-color: orange;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">Content here</div>
</div>
</body>
Absolute Positioning and Negative Margin
<style type="text/css">
.parent {
position: relative;
background-color: pink;
height: 200px;
}
.child {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
/* % 定义基于包含块（父元素）宽度的百分比宽度／高度 */
width: 50%;
height: 30%;
/* margin 默认值为0，auto 由浏览器计算外边距 */
/*
定位元素的边界是指定位元素 margin 外侧的边界；
包含块的包含区域是指包含块的 border 内侧的 padding + content 区域
*/
/*
若我们不设置 margin: auto;
因为同时定义了 left 和 right 值，且 width 和 height 有值，那么 left 生效， right 无效，
同样，同时定义了 top 和 bottom，top 生效。
*/
margin: auto;
background-color: orange;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">Content here</div>
</div>
</body>
Equal Top and Bottom Padding
<style type="text/css">
.parent {
/* padding %：基于父元素的宽度的百分比的填充 */
/* 注：用 margin 也可以做到同样的效果，但是必须注意下 height 的高度。 */
padding: 5% 0;
background-color: pink;
}
.child {
padding: 10% 0;
background-color: orange;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">Content here</div>
</div>
</body>
Floater Div
<style type="text/css">
.parent {
height: 250px;
background-color: pink;
}
.floater {
float: left;
height: 50%;
width: 100%;
margin-bottom: -50px;
background-color: rgba(0, 255, 0, 0.3);
}
.child {
clear: both;
height: 100px;
background-color: orange;
}
</style>
</head>
<body>
<div class="parent">
<div class="floater"></div>
<div class="child">Content here</div>
</div>
</body>
网友评论