html css如何竖直居中一个元素(4种方法)

欢迎大家来到IT世界,在知识的湖畔探索吧!

1. 元素高度声明的情况下在父容器中居中：绝对居中法

<div class="parent">
 <div class="absolute-center"></div>
</div>
.parent {
 position: relative;
}
.absolute-center {
 position: absolute;
 margin: auto;
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
 height: 70%;
 width: 70%;
}
优点：
1.跨浏览器，包括 IE8-10
2.无需其他冗余标记，CSS 代码量少
3.完美支持图片居中
4.宽度高度可变，可用百分比
缺点：
1.必须声明高度

欢迎大家来到IT世界,在知识的湖畔探索吧!

2. 负外边距：当元素宽度高度为固定值时。设置 margin-top/margin-left 为宽度高度一 半的相反数，top:50%;left:50%

欢迎大家来到IT世界,在知识的湖畔探索吧!<div class="parent">
 <div class="negative-margin-center"></div>
</div>
.parent {
 position: relative;
}
.negative-margin-center {
 position: absolute;
 left: 50%;
 top: 50%;
 margin-left: -150px;
 margin-top: -150px;
 height: 300px;
 width: 300px;
}
优点：
良好的跨浏览器特性，兼容 IE6-7
代码量少
缺点：
不能自适应，不支持百分比尺寸和 min-/max-属性设置
内容可能溢出容器
边距大小域与 padding，box-sizing 有关

3. CSS3 Transform 居中：

<div class="parent">
 <div class="transform-center"></div>
</div>
.parent {
 position: relative;
}
.transform-center {
 position: absolute;
 left: 50%;
 top: 50%;
 margin: auto;
 width: 50%;
 -webkit-transform: translate(-50%， -50%);
 -moz-transform: translate(-50%， -50%);
 transform: translate(-50%, -50%);
}
优点：
内容高度可变
代码量少
缺点：
IE8 不支持
属性需要浏览器厂商前缀
可能干扰其他 transform 效果

4. table-cell 居中：

欢迎大家来到IT世界,在知识的湖畔探索吧!<div class="center-container is-table">
 <div class="table-cell">
 <div class="center-block"></div>
 </div>
</div>
.center-container.is-table {
 display: table;
}
.is-table .table-cell {
 display: table-cell;
 vertical-align: middle;
}
.is-table .center-block {
 width: 50%;
 margin: 0 auto;
}
优点：
高度可变
内容溢出会将父元素撑开
跨浏览器兼容性好
缺点：
需要额外 html 标记