网页布局居然还可以这样写！！！_css 常用布局总结-CSDN博客

本文链接：https://blog.csdn.net/Da_Bao_zi/article/details/120131135

本文详细介绍了多种CSS布局技巧，包括水平居中（如inline-block、table、absolute定位和flex）和垂直居中（如table-cell、absolute定位和flex）的方法。同时，还探讨了多列布局的实现，如定宽与自适应列的组合布局，以及等分和等高布局的解决方案。这些技巧涵盖了传统方法与现代CSS规范，适用于不同的浏览器兼容性和设计需求。

摘要由CSDN通过智能技术生成

居中布局

居中均以不定宽为前提，定宽情况包含其中

1、水平居中

1.1 inline-block+text-align

.parent{
    text-align: center;
}
.child{
    display: inline-block;
}

1.2 table+margin 也是一个水平居中

.child{
    display: table;
    margin: 0 auto;
}

1.3 absolute+transform 定位实现

.parent{
    position: relative;
    height:1.5em;
}
.child{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

或者使用


.parent{
    position: relative;
    height:1.5em;
}
.child{
    position: absolute;
    width:100px;
    left: 50%;
    margin-left:-50px;

1.4 flex + justify-content


.parent{
    display: flex;
    justify-content: center;
}
.child{
    margin: 0 auto;
}

提示：flex是一个强大的css，生而为布局，它可以轻松的满足各种居中、对其、平分的布局要求，但由于现浏览器兼容性问题，此方案很少被使用，但是值得期待浏览器兼容性良好但那一天！

2、垂直居中

2.1 table-cell + vertial-align

.parent{
    display: table-cell;
    vertical-align: middle;
}

居中布局

1、水平居中

1.1 inline-block+text-align

1.2 table+margin 也是一个水平居中

1.3 absolute+transform 定位实现

1.4 flex + justify-content

2、垂直居中

2.1 table-cell + vertial-align

2.2 absolute + transform

多列布局

2.2 absolute + transform


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

2.3 flex + align-items

.parent{
    display: flex;
    align-items: center;
}

提示：高版本浏览器兼容

3、水平居中

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

.parent{
    text-align: center;
    display: table-cell;
    vertical-align: middle;
}
.child{
    display: inline-block;
}

3.2 absolute + transform

.parent{
    position: relative;
}
.child{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

3.3 flex 兼容性差

.parent{
    display: flex;
    justify-content: center;
    align-items: center;
}

多列布局

1、一列定宽，一列自适应

1.1 float + margin

.left{

float: left;

width: 100px;

}

.right{

margin-left: 120px;

}

提示：此方案对于定宽布局比较好，不定宽布局推荐方法1.2

1.2 float + overflow

.left{

float: left;

width: 100px;

margin-right: 20px;

}

.right{

overflow: hidden;

}

提示：个人常用写法，此方案不管是多列定宽或是不定宽，都可以完美实现，同时可以实现登高布局

1.3 table

.parent{

display: table; width: 100%;

table-layout: fixed;

}

.left,.right{

display: table-cell;

}

.left{

width: 100px;

padding-right: 20px;

}

1.4 flex

.parent{

display: flex;

}

.left{

width: 100px;

padding-right: 20px;

}

.right{

flex: 1;

}

2、多列定宽，一列自适应

2.1 float + overflow

.left,.center{

float: left;

width: 100px;

margin-right: 20px;

}

.right{

overflow: hidden;

}

2.2) table

.parent{

display: table; width: 100%;

table-layout: fixed;

}

.left,.center,.right{

display: table-cell;

}

.right{

width: 100px;

padding-right: 20px;

}

2.3 flex

.parent{

display: flex;

}

.left,.center{

width: 100px;

padding-right: 20px;

}

.right{

flex: 1;

}

3、一列不定宽，一列自适应

3.1 float + overflow

.left{

float: left;

margin-right: 20px;

}

.right{

overflow: hidden;

}

.left p{width: 200px;}

3.2 table

.parent{

display: table; width: 100%;

}

.left,.right{

display: table-cell;

}

.left{

width: 0.1%;

padding-right: 20px;

}

.left p{width:200px;}

3.3 flex

.parent{

display: flex;

}

.left{

margin-right: 20px;

}

.right{

flex: 1;

}

.left p{width: 200px;}

4、多列不定宽，一列自适应

4.1 float + overflow

.left,.center{

float: left;

margin-right: 20px;

}

.right{

overflow: hidden;

}

.left p,.center p{

width: 100px;

}

5、等分

5.1 float + margin

.parent{

margin-left: -20px;

}

.column{

float: left;

width: 25%;

padding-left: 20px;

box-sizing: border-box;

}

5.2 table + margin

.parent-fix{

margin-left: -20px;

}

.parent{

display: table;

width:100%;

table-layout: fixed;

}

.column{

display: table-cell;

padding-left: 20px;

}

5.3 flex

.parent{

display: flex;

}

.column{

flex: 1;

}

.column+.column{

margin-left:20px;

}

6、等高

6.1 float + overflow

.parent{

overflow: hidden;

}

.left,.right{

padding-bottom: 9999px;

margin-bottom: -9999px;

}

.left{

float: left; width: 100px;

}

.right{

overflow: hidden;

}

6.2 table

.parent{

display: table;

width: 100%;

}

.left{

display:table-cell;

width: 100px;

margin-right: 20px;

}

.right{

display:table-cell;

}

6.3 flex

.parent{

display:flex;

width: 100%;

}

.left{

width: 100px;

}

.right{

flex:1;

}