CSS水平垂直居中方法（终结版）
参考博客：
CSS布局解决方案（终结版）
10种CSS水平垂直居中方法(内含flex 兼容性解决方案信息)
https://juejin.im/post/5aa252ac518825558001d5de (很全)
居中布局
水平居中
1）使用 inline-block + text-align
<style>
.child {
display: inline-block;
}
.parent {
text-align: center;
}
</style>
<div class="parent">
<div class="child">Demo</div>
</div>
原理：先将子框由块级元素改变为行内块元素，再通过设置行内块级元素居中已达到水平居中。
用法：对子框设置 display: inline-block, 对父框设置 text-align: center.
优点：兼容性好，可以兼容到 ie6、ie7
缺点：child 里面的文字也会水平居中，可以在.child 中添加 text-align: left; 还原
2）使用 table + margin
<style>
.child {
display: table;
margin: 0 auto;
}
</style>
<div class="parent">
<div class="child">Demo</div>
</div>
原理：将子框设置为块级表格来显示（类似），再设置子框居中以达到水平居中。
用法：对子框设置 display: table, 再设置 margin: 0 auto.
优点：只需要设置child， ie8 以上都支持。
缺点：不支持 ie6、ie7， 将 div 换成 table。
3）使用 absolute + transform
<style>
.child {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
.parent {
position: relative;
}
</style>
<div class="parent">
<div class="child">Demo</div>
</div>
原理：将子框设置为绝对定位，移动子框，使子框左侧距离相对框左侧的距离为相对框的一半，再向左移动子框的一半宽度。
用法：对父框设置 position: relative, 对子框设置 position: absolute, left: 50%, transfrom: translateX(-50%).优点：居中元素不会对其他产生影响。
缺点：transform 属于 css3 内容，兼容性存在一定问题，高版本浏览器需要添加一些前缀。
4）使用 flex + margin
<style>
.child {
margin: 0 auto;
}
.parent {
display: flex;
}
</style>
<div class="parent">
<div class="child">Demo</div>
</div>
缺点：低版本浏览器（ie6、ie7、ie8）不支持。
5）使用 flex + justify-content
<style>
.parent {
display: flex;
justify-content: center;
}
</style>
<div class="parent">
<div class="child">Demo</div>
</div>
优点：设置parent 即可。
缺点：ie6、ie7、ie8 不支持。
垂直居中
1）使用 table-cell + vertical-align
<style>
.parent {
display: table-cell;
vertical-align: middle;
}
</style>
<div class="parent">
<div class="child">Demo</div>
</div>
原理：通过将父框转化为一个表格单元格显示（类似<td> 和 <th>），再通过设置属性，使表格单元格内容垂直居中以达到效果。
用法：先将父框设置为 display: table-cell, 再设置 vertical-align: middle。
优点：兼容性好，ie8 及以上均支持。
2）使用 absolute + transform
<style>
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
</style>
<div class="parent">
<div class="child">Demo</div>
</div>
优点：居中元素不会对其他的产生影响
缺点：transform 属于 css3 内容，兼容性存在一定问题，高版本浏览器需要添加一些前缀。
3）使用 flex + align-items
<style>
.parent {
display: flex;
align-items: center;
}
</style>
<div class="parent">
<div class="child">Demo</div>
</div>
优点：只设置 parent
缺点：兼容性存在一些问题（可参见另外一篇博文，了解更多 flex 兼容性写法）
水平、垂直居中
1）使用 absolute + transform
<style>
.parent {
position: relative;
}
.child {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
</style>
<div class="parent">
<div class="child">Demo</div>
</div>
优点：child 元素不会对其他元素产生影响
缺点：兼容性存在一定问题
2）使用 inline-block + text-align + table-cell + vertical-align
<style>
.parent {
text-align: center;
display: table-cell;
vertical-align: middle;
}
.child {
display: inline-block;
}
</style>
<div class="parent">
<div class="child">Demo</div>
</div>
优点：兼容性比较好
3）使用 flex + justify-content + align-items
<style>
.parent {
display: flex;
justify-content: center;
align-items: center;
}
</style>
<div class="parent">
<div class="child">Demo</div>
</div>
优点：只需要设置 parent
缺点：flex 布局兼容性问题
多列布局
定宽 + 自适应
1）使用 float + overflow
原理：通过将左边框脱离文本流，设置右边规定当内容溢出元素框时发生的事情已达到效果。
用法：将左框设置为 float: left, width, margin-left/margin-right, 在设置实际的右框 overflow: hidden.
<style>
.left {
float: left;
width: 100px;
margin-right: 20px;
}
.right {
overflow: hidden;
}
</style>
<div class="parent">
<div class="left">
<p>left</p>
</div>
<div class="right">
<p>right</p>
<p>right</p>
</div>
</div>
效果：
优点：简单
缺点：不支持 ie6.
补充说明：right 中设置了 overflow: hidden; 方便解决 margin 坍塌。可另行搜索 margin 坍塌，及BFC 块等内容以了解详细。
2）使用 float + margin
<style>
.left {
float: left;
width: 100px;
}
.right {
margin-left: 120px;
}
</style>
<div class="parent">
<div class="left">
<p>left</p>
</div>
<div class="right">
<p>right</p>
<p>right</p>
</div>
</div>
优点：简单
缺点：兼容性存在问题。ie6 下有 3px 的 bug。right 中的 p 清除浮动将产生bug。
3）使用 float + margin （改良版）
原理：在1）的基础上，通过向右框添加一个父框，再加上设置左、右父框属性使之产生BFC 以去除 bug。
<style>
.left {
float: left;
width: 100px;
position: relative;
}
.right-fix {
float: right;
width: 100%;
margin-left: -100px;
}
.right {
margin-left: 120px;
}
</style>
<div class="parent">
<div class="left">
<p>left</p>
</div>
<div class="right-fix">
<div class="right">
<p>right</p>
<p>right</p>
</div>
</div>
</div>
优点：简单，易理解。
4）使用 table
原理：通过将父框设置为表格，将左右边框转化为类似于同一行的td，从而达到多列布局。
用法：将父框设置为 display: table, width: 100%, table-layout: fixed, 再设置左右框 display: table-cell, 最后设置左右框 width, padding-right.
<style>
.parent {
display: table;
width: 100%;
table-layout: fixed;
}
.left {
width: 100px;
padding-right: 20px;
}
.left, .right {
display: table-cell;
}
</style>
<div class="parent">
<div class="left">
<p>left</p>
</div>
<div class="right">
<p>right</p>
<p>right</p>
</div>
</div>
5）使用 flex
<style>
.parent {
display: flex;
}
.left {
width: 100px;
padding-right: 20px;
}
.right {
flex: 1;
}
</style>
<div class="parent">
<div class="left">
<p>left</p>
</div>
<div class="right">
<p>right</p>
<p>right</p>
</div>
</div>
优点：flex 强大
缺点：兼容性存在问题，不过 flex 是趋势
两列定宽 + 一列自适应
<style>
.left, .center {
float: left;
width: 100px;
padding-right: 20px;
}
.right {
overflow: hidden;
}
</style>
<div class="parent">
<div class="left">
<p>left</p>
</div>
<div class="center">
<p>center</p>
</div>
<div class="right">
<p>right</p>
<p>right</p>
</div>
</div>
效果：
不定宽 + 自适应
1）使用 float + overflow
<style>
.left {
float: left;
padding-right: 20px;
}
.right {
overflow: hidden;
}
.left p {
width: 200px;
}
</style>
<div class="parent">
<div class="left">
<p>left</p>
</div>
<div class="right">
<p>right</p>
<p>right</p>
</div>
</div>
优点：简单
缺点：ie6 下兼容性存在问题
2）使用 table
原理：将父框改变为表格，将左右框转换为类似于同一行的td 已达到多列布局，设置父框宽度 100%， 给左框子元素一个固定宽度从而达到效果。
用法：将父框设置为 display: table, width: 100%, 再设置左、右框 display: table-cell, 最后设置左框 width: 0.1%, padding-right 以及左框中的内容 width.
<style>
.parent {
display: table;
width: 100%;
}
.left, .right {
display: table-cell;
}
.left {
width: 0.1%;
padding-right: 20px;
}
.left p {
width: 200px;
}
</style>
<div class="parent">
<div class="left">
<p>left</p>
</div>
<div class="right">
<p>right</p>
<p>right</p>
</div>
</div>
缺点：ie6，ie7 不支持。
3）使用 flex
<style>
.parent {
display: flex;
}
.left {
margin-right: 20px;
}
.right {
flex: 1;
}
.left p {
width: 200px;
}
</style>
<div class="parent">
<div class="left">
<p>left</p>
</div>
<div class="right">
<p>right</p>
<p>right</p>
</div>
</div>
优缺点：flex 强大。
两列不定宽 + 一列自适应
<style>
.left, .center {
float: left;
margin-right: 20px;
}
.right {
overflow: hidden;
}
.left p, .center p {
width: 100px;
}
</style>
<div class="parent">
<div class="left">
<p>left</p>
</div>
<div class="center">
<p>center</p>
</div>
<div class="right">
<p>right</p>
<p>right</p>
</div>
</div>
等分布局
根据图片所示方案，我们需要解决两个问题：
- 如何让总宽度增加 g （即：L + g）
- 如何让每个宽包含 g （即：w + g）
1）使用 float
<style>
* { margin: 0; padding: 0; }
.parent {
margin-left: -20px;
}
.column {
float: left;
width: 25%;
padding-left: 20px;
box-sizing: border-box;
}
</style>
<div class="parent">
<div class="column"><p>1</p></div>
<div class="column"><p>2</p></div>
<div class="column"><p>3</p></div>
<div class="column"><p>4</p></div>
</div>
优点：兼容性好
缺点：ie6 ie7 百分比兼容性存在一定问题
2）使用 table
<style>
* { margin: 0; padding: 0; }
.parent-fix {
margin-left: -20px;
}
.parent {
display: table;
width: 100%;
table-layout: fixed;
}
.column {
display: table-cell;
padding-left: 20px;
}
</style>
<div class="parent-fix">
<div class="parent">
<div class="column"><p>1</p></div>
<div class="column"><p>2</p></div>
<div class="column"><p>3</p></div>
<div class="column"><p>4</p></div>
</div>
</div>
优点：结构和块数无关联
缺点：增加了一层
3）使用 flex
<style>
.parent {
display: flex;
}
.column {
flex: 1;
}
</style>
<div class="parent">
<div class="column"><p>1</p></div>
<div class="column"><p>2</p></div>
<div class="column"><p>3</p></div>
<div class="column"><p>4</p></div>
</div>
优点：代码少，与块数无关
缺点：flex 的兼容性
定宽 + 自适应 + 两块高度一样高
1）使用 float
原理：通过过分加大左右子框的高度，辅助超出隐藏，以达到视觉上的等高。
用法：将父框设置 overflow: hidden， 再设置左右子框 padding-bottom：9999px、margin-bottom：-9999px，最后设置左框 float: left, width, margin-right, 右框 overflow: hidden.
<style>
p {
background: none !important;
}
.left, .right {
background: yellowgreen;
}
.parent {
overflow: hidden;
}
.left, .right {
padding-bottom: 9999px;
margin-bottom: -9999px;
}
.left {
float: left;
width: 100px;
margin-right: 20px;
}
.right {
overflow: hidden;
}
</style>
<div class="parent">
<div class="left">
<p>left</p>
</div>
<div class="right">
<p>right</p>
<p>right</p>
</div>
</div>
效果：
如果没有设置padding-bottom: 9999px; margin-bottom: -9999px; 则效果如下：
优点：兼容性好
缺点：伪等高，非真正的等高
2）使用 table
<style>
.parent {
display: table;
width: 100%;
table-layout: fixed;
}
.left {
width: 100px;
padding-right: 20px;
}
.right, .left {
display: table-cell;
}
</style>
<div class="parent">
<div class="left">
<p>left</p>
</div>
<div class="right">
<p>right</p>
<p>right</p>
</div>
</div>
3）使用 flex
<style>
.parent {
display: flex;
}
.left {
width: 100px;
margin-right: 20px;
}
.right {
flex: 1;
}
</style>
<div class="parent">
<div class="left">
<p>left</p>
</div>
<div class="right">
<p>right</p>
<p>right</p>
</div>
</div>
优点：代码少
缺点：flex的兼容性问题
4）使用 display
<style>
.parent {
width: 100%;
display: -webkit-box;
}
.left {
width: 100px;
margin-right: 20px;
}
.right {
-webkit-box-flex: 1;
}
</style>
<div class="parent">
<div class="left">
left
</div>
<div class="right">
right
</div>
</div>
缺点：兼容性存在较大问题
全屏布局
特点
滚动条不是全局滚动条，而是出现在内容区域里，是主内容区域
浏览器变大时，撑满窗口
方法
1）使用 position
原理：将上下部分固定，中间部分使用定宽+自适应+两块高度一样高。
用法：见示例
<style>
html, body, .parent {
margin: 0;
padding: 0;
overflow: hidden;
}
body {
color: white;
}
.top {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 100px;
background: blue;
}
.left {
position: absolute;
left: 0;
top: 100px;
bottom: 50px;
width: 200px;
background: red;
}
.right {
position: absolute;
left: 200px;
top: 100px;
bottom: 50px;
right: 0;
background: pink;
overflow: auto;
}
.right .inner {
min-height: 1000px;
}
.bottom {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 50px;
background: yellowgreen;
}
</style>
<div class="parent">
<div class="top">top</div>
<div class="left">left</div>
<div class="right">
<div class="inner">right</div>
</div>
<div class="bottom">bottom</div>
</div>
优点：兼容性好，ie6+ 均支持
2）使用 flex
<style>
html, body, .parent {
margin: 0;
height: 100%;
overflow: hidden;
}
body {
color: white;
}
.parent {
display: flex;
flex-direction: column;
}
.top {
height: 100px;
background: blue;
}
.bottom {
height: 50px;
background: yellowgreen;
}
.middle {
flex: 1;
display: flex;
}
.left {
width: 200px;
background: red;
}
.right {
flex: 1;
overflow: auto;
background: pink;
}
.right .inner {
min-height: 1000px;
}
</style>
<div class="parent">
<div class="top">top</div>
<div class="middle">
<div class="left">left</div>
<div class="right">
<div class="inner">right</div>
</div>
</div>
<div class="bottom">bottom</div>
</div>
缺点：兼容性差，ie9及以下不兼容。
全屏布局相关兼容性、性能、自适应一览表：
| 方案 | 兼容性 | 性能 | 是否自适应 |
|---|---|---|---|
| Position | 好 | 好 | 部分 |
| Flex | 较差 | 差 | 可自适应 |
| Grid | 差 | 较好 | 可自适应 |
至此，结束。
225
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
