前端进阶系列—常见布局及居中

css常见布局解决方案

水平居中布局

margin+定宽

1
2
3
4
5
6
7
8
9
10
<div class="parent">
<div class="child">Demo</div>
</div>

<style>
.child {
width: 100px;
margin: 0 auto;
}
</style>
  • 想必是个前端都见过,这定宽的水平居中,我们还可以用下面这种来实现不定宽

    table+margin

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <div class="parent">
    <div class="child">Demo</div>
    </div>

    <style>
    .child {
    display: table;
    margin: 0 auto;
    }
    </style>
  • display:table在表现上类似block元素,但是宽度为内容宽。

  • 无需设置父元素样式 (支持 IE 8 及其以上版本)兼容 IE 8 一下版本需要调整为 <table>

inline-block+text-align

1
2
3
4
5
6
7
8
9
10
11
12
<div class="parent">
<div class="child">Demo</div>
</div>

<style>
.child {
display: inline-block;
}
.parent {
text-align: center;
}
</style>

兼容性佳(甚至可以兼容IE6和IE7)

absolute+margin-left

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div class="parent">
<div class="child">Demo</div>
</div>

<style>
.parent {
position: relative;
}
.child {
position: absolute;
left: 50%;
width: 100px;
margin-left: -50px; /* width/2 */
}
</style>
  • 宽度固定
  • 相比与使用transform兼容性更好

absolute+transform

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="parent">
<div class="child">Demo</div>
</div>

<style>
.parent {
position: relative;
}
.child {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
</style>
  • 绝对定位脱离文档流,不会对后续元素的布局造成影响
  • transform为CSS3属性,有兼容性问题

flex+justify-content

1
2
3
4
5
6
7
8
9
10
  <div class="parent">
<div class="child">Demo</div>
</div>

<style>
.parent {
display: flex;
justify-content: center;
}
</style>
  • 只需设置父节点属性,无需设置子元素
  • flex有兼容性问题

    垂直居中

    table-cell+vertical-align

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <div class="parent">
    <div class="child">Demo</div>
    </div>

    <style>
    .parent {
    display: table-cell;
    vertical-align: middle;
    }
    </style>
  • 兼容性好(IE 8以下版本需要调整页面结构至 table)

absolute+transform

强大的absolute对于这种小问题当然是很简单的

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="parent">
<div class="child">Demo</div>
</div>

<style>
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
</style>

  • 绝对定位脱离文档流,不会对后续元素的布局造成影响,但如果绝对定位元素是唯一的元素,则父元素也会失去高度。
  • transform 为CSS3属性,有兼容性问题

同水平居中,这也可以使用margin-top实现,原理水平居中

flex+align-items

如果说absolute强大,那flex只是笑笑,因为他才是最强的,但有兼容性问题

1
2
3
4
5
6
7
8
9
10
<div class="parent">
<div class="child">Demo</div>
</div>

<style>
.parent {
display: flex;
align-items: center;
}
</style>

水平垂直居中

absolute+transform

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div class="parent">
<div class="child">Demo</div>
</div>

<style>
.parent {
position: relative;
}
.child {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
</style>
  • 绝对定位脱离文档流,不会对后续元素的布局造成影响
  • transform为CSS3属性,有兼容性问题

inline-block+text-align+table-cell+vertical-align

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="parent">
<div class="child">Demo</div>
</div>

<style>
.parent {
text-align: center;
display: table-cell;
vertical-align: middle;
}
.child {
display: inline-block;
}
</style>
  • 兼容性好

    flex+justify-content+align-items

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <div class="parent">
    <div class="child">Demo</div>
    </div>

    <style>
    .parent {
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center; /*垂直居中*/
    }
    </style>
  • 只需设置父节点属性,无需设置子元素

  • 还是存在兼容性问题

一列定宽,一列自适应

这种布局最常见的就是中后台类型的项目,如下图:

image

float+margin

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<div class="parent">
<div class="left">
<p>left</p>
</div>
<div class="right">
<p>right</p>
<p>right</p>
</div>
</div>

<style>
.left {
float: left;
width: 100px;
}
.right {
margin-left: 100px
/*间距可再加入 margin-left */
}
</style>

IE6中会有3px的BUG,解决方法可以在.left加入margin-left:-3px当然下面的方案也可以解决这个bug:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<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>

<style>
.left {
float: left;
width: 100px;
}
.right-fix {
float: right;
width: 100%;
margin-left: -100px;
}
.right {
margin-left: 100px
/*间距可再加入 margin-left */
}
</style>

float+overflow

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div class="parent">
<div class="left">
<p>left</p>
</div>
<div class="right">
<p>right</p>
<p>right</p>
</div>
</div>

<style>
.left {
float: left;
width: 100px;
}
.right {
overflow: hidden;
}
</style>

设置overflow:hidden会出发BFC模式(block formatting context)块级格式上下文。BFC是什么呢?用通俗的江就是,随便你在BFC里面干什么,外面都不会手段哦影响。此方法样式简单但不支持 IE 6

table

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<div class="parent">
<div class="left">
<p>left</p>
</div>
<div class="right">
<p>right</p>
<p>right</p>
</div>
</div>

<style>
.parent {
display: table;
width: 100%;
table-layout: fixed;
}
.left {
display: table-cell;
width: 100px;
}
.right {
display: table-cell;
/*宽度为剩余宽度*/
}
</style>

table 的显示特性为每列的单元格宽度和一定等与表格宽度。 table-layout: fixed 可加速渲染,也是设定布局优先。table-cell 中不可以设置margin但是可以通过 padding 来设置间距

flex

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<div class="parent">
<div class="left">
<p>left</p>
</div>
<div class="right">
<p>right</p>
<p>right</p>
</div>
</div>

<style>
.parent {
display: flex;
}
.left {
width: 100px;
margin-left: 20px;
}
.right {
flex: 1;
}
</style>
  • 低版本浏览器兼容性问题
  • 性能问题,只是适合小范围布局

以上就是常见的几种布局。

参考文章: