Hi，大家好，我是编程小6，很荣幸遇见你，我把这些年在开发过程中遇到的问题或想法写出来，今天说一说
css竖直方向居中_HTML+CSS网页设计与制作,希望能够帮助你!!!。

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.必须声明高度

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

<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 居中：

<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 标记

今天的分享到此就结束了，感谢您的阅读，如果确实帮到您，您可以动动手指转发给其他人。