水平居中布局
margin+定宽
<div class="parent">
<div class="child">Demo</div>
</div>
<style>
.child {
width: 100px;
margin: 0 auto;
}
</style>- 想必是个前端都见过，这定宽的水平居中，我们还可以用下面这种来实现不定宽
table+margin
<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
<div class="parent">
<div class="child">Demo</div>
</div>
<style>
.child {
display: inline-block;
}
.parent {
text-align: center;
}
</style>兼容性佳（甚至可以兼容IE6和IE7）
absolute+margin-left
<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
<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
<div class="parent">
<div class="child">Demo</div>
</div>
<style>
.parent {
display: flex;
justify-content: center;
}
</style>- 只需设置父节点属性，无需设置子元素
-
flex有兼容性问题
垂直居中
table-cell+vertical-align
<div class="parent">
<div class="child">Demo</div>
</div>
<style>
.parent {
display: table-cell;
vertical-align: middle;
}
</style>- 兼容性好(IE 8以下版本需要调整页面结构至 table)
absolute+transform
强大的absolute对于这种小问题当然是很简单的
<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只是笑笑，因为他才是最强的，但有兼容性问题
<div class="parent">
<div class="child">Demo</div>
</div>
<style>
.parent {
display: flex;
align-items: center;
}
</style>水平垂直居中
absolute+transform
<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
<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
<div class="parent">
<div class="child">Demo</div>
</div>
<style>
.parent {
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /*垂直居中*/
}
</style>- 只需设置父节点属性，无需设置子元素
- 还是存在兼容性问题
一列定宽，一列自适应
这种布局最常见的就是中后台类型的项目，如下图：
float+margin
<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:
<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
<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
<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
<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>- 低版本浏览器兼容性问题
- 性能问题，只是适合小范围布局
以上就是常见的几种布局。
参考文章：