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>
等分布局
![](https://i-blog.csdnimg.cn/blog_migrate/ffe8959b43a22ac37e429b185581fd64.png)
![](https://i-blog.csdnimg.cn/blog_migrate/f7a60a8b85c12f520ac1c4ce6394d6a5.png)
根据图片所示方案,我们需要解决两个问题:
- 如何让总宽度增加 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>
缺点:兼容性存在较大问题
全屏布局
特点
滚动条不是全局滚动条,而是出现在内容区域里,是主内容区域
浏览器变大时,撑满窗口
方法
![](https://i-blog.csdnimg.cn/blog_migrate/172c86b3366e265fb0f3b7bb63029643.png)
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及以下不兼容。
![](https://i-blog.csdnimg.cn/blog_migrate/8011bfaaaeab8c562acd970bfa320e11.png)
全屏布局相关兼容性、性能、自适应一览表:
方案 | 兼容性 | 性能 | 是否自适应 |
---|---|---|---|
Position | 好 | 好 | 部分 |
Flex | 较差 | 差 | 可自适应 |
Grid | 差 | 较好 | 可自适应 |
至此,结束。