水平居中

 

利用margin居中

 

不能脱离文档流

.s1{

height: 100px;

background-color: #FAF60D;

}

.d1{

width: 200px;

height: 100px;

background-color: #FA5230;

margin:0 auto;

 

利用文字居中实现

.s2{

/*不定高和不定宽*/

background-color: #FA5230;

/*利用内联元素居中实现*/

text-align: center;

}

.d2{

width: 200px;

height: 100px;

background-color: #6B2EFA;

display: inline-block;

 

利用定位加更改元素本身x轴值实现

 

.s3{

width: 100%;

height: 100px;

background-color: #FAF60D;

/*开启相对定位-让子级元素参考父级元素定位*/

position: relative;

 

}

.d3{

width: 200px;

height: 100px;

background-color: #FA5230;

/*开启绝对定位*/

position: absolute;

left: 50%;

/*更改X轴为负值，往左平移元素本身的50%*/

transform: translatex(-50%);

}

 

垂直居中

利用单元格效果加实线垂直效果

 

.c1{

width: 300px;

height: 600px;

background-color: #30BBFA;

/*将当前元素设置为表格的单元格效果*/

display: table-cell;

/*实线垂直方向居中效果*/

vertical-align: middle;

 

}

.x1{

width: 300px;

height: 300px;

background-color: #F90BFA;

}

 

利用定位加更改元素本身Y轴值实现

 

/*垂直居中二*/

.c2{

width: 300px;

height: 600px;

background-color: #F90BFA;

position: absolute;

right: 7px;

top: 308px;

}

.x2{

width: 300px;

height: 300px;

background-color: #FA5230;

position: absolute;

top:50%;

transform: translatey(-50%);

}

 

居中

 

利用文字居中实现水平居中，

再利用单元格效果加实现垂直

效果实现

.e1{

width: 600px;

height: 600px;

background-color: #FA5230;

 

text-align: center;

display: table-cell;

vertical-align: middle;

}

.r1{

width: 100px;

height: 100px;

background-color: #FAF60D;

display: inline-block;

}

 

利用定位加更改元素本身的XY轴值实现

 

.e2{

width: 600px;

height: 600px;

background-color:#30BBFA;

position: relative;

margin: 0 auto;

}

.r2{

width: 100px;

height: 100px;

background-color:#F90BFA;

position: absolute;

left: 50%;

top: 50%;

transform:translate(-50%,-50%)

}

 

两列布局

 

当两个元素都为百分值时，利用左浮动实现

 

.b1{

width: 80%;

height: 600px;

 

border: solid 5px #FA5230;

margin: 0 auto;

}

.b3,.b2{

/*将块级元素按水平方向排列*/

float: left;

}

.b2{

width: 25%;

height: 600px;

background-color: #30BBFA;

}

 

.b3{

width: 75%;

height: 600px;

background-color: #F90BFA;

}

 

当两个元素一个为定宽、一个为百分值时

 

.v1{

width: 80%;

height: 600px;

min-width: 400px;

border: solid 5px #F90BFA;

margin: 0 auto;

}

.v2,.v3{

float: left;

}

.v2{

/*定宽-宽度值确定不变*/

width: 200px;

height: 600px;

background-color: #FA5230;

/*将定宽的列元素优先级别高于浮动*/

position: relative;

 

}

.v3 {

/*自适应-根据定宽的列适应剩余空间*/

width: 100%;

height: 600px;

background-color: #30BBFA;

margin-left: -200px; ;

box-sizing: border-box;

padding-left: 200px;

 

}

 

利用第一个子元素左浮动实现

 

.b4{

width: 80%;

height: 600px;

min-width: 400px;

border: solid 5px #FAF60D;

margin: 0 auto;

}

.b5{

width: 200px;

height: 600px;

 

background: #FA5230;

float: left;

}

.b6{

height: 600px;

background: #F90BFA;

/*加大左外边距*/

margin-left: 200px; ;

}

 

利用两兄弟元素开启定位实现

 

.n1{

width: 80%;

height: 600px;

min-width: 200px;

border: solid 5px #FAF60D;

margin: 0 auto;

position: relative;

}

.n2 {

width: 100px;

height: 600px;

background-color: #FA5230;

position: absolute;

}

.n3 {

 

height: 600px;

background-color: #6B2EFA;

margin-left: 100px;

}

 

利用第一个子元素开启左浮动第二个打开bfc隐藏溢出部分

 

.n4 {

width: 80%;

height: 600px;

min-width: 200px;

 

border: solid 5px #F90BFA;

margin: 0 auto;

}

.n5{

width: 100px;

height: 600px;

background-color: #30BBFA;

float: left;

}

 

.n6 {

height: 600px;

background-color: #FAF60D;

/*块级格式化环境bfc，隐藏溢出部分*/

overflow: hidden;

}

 

改变块级元素为单元格显示

利用fixed值计算单元格布局

 

.f1{

width: 80%;

height: 600px;

min-width: 400px;

 

border:solid 5px #FA8BA7;

margin: 0 auto;

display: table;

/*

fixed值

1.先显示布局内容–速度快

2.计算表格中单元格的布局

*/

table-layout: fixed;

}

.f2,.f3{

/*改变块级元素为单元格显示*/

display: table-cell;

}

.f2{

width: 200px;

height: 600px;

background-color: #30BBFA;

 

}

.f3{

height: 600px;

background-color: #F90BFA;

 

}

 

三列布局

 

当前两个子元素为固定值，第三个子元素为百分值时

 

.g1{

width: 80%;

height: 600px;

border: solid 5px #FA8BA7;

margin: 0 auto;

 

}

.g2,.g3{

width: 100px;

height: 600px;

float: left;

}

.g2{

background-color: #1AE2FA;

}

.g3{

background-color: #F90BFA;

}

.g4{

height: 600px;

background-color: #FAF60D;

margin-left: 200px;

}

 

当第一个和第三个子元素为固定宽时

 

设置第一个子元素为左浮动并开启定位

设置第三个子元素为右浮动并设置左外

边距为负值（大小取决于该元素的宽度）

设置第二个子元素为左浮动，并用怪异盒子

往里收缩

 

.t1{

width: 80%;

height: 600px;

border: solid 5px #FA8BA7;

margin: 0 auto;

 

}

.left1{

width: 100px;

height: 600px;

background-color: #F90BFA;

float: left;

position: relative;

 

}

.center1{

width: 100%;

height: 600px;

background-color: #FA5230;

float: left;

margin-left: -100px;

/*利用怪异盒子将盒子往里收缩*/

box-sizing: border-box;

/*设置盒子模型上下内边距为0，左右内边距为100px*/

padding: 0 100px;

 

}

.right1{

width: 100px;

height: 600px;

background-color: #FAF60D;

float: right;

margin-left: -100px;

}

 

三个子元素全部开启左浮动，第一个子元素开启绝对定位，第二个子元素利用怪异盒子往里收缩

 

.t2{

width: 80%;

height: 600px;

border: solid 5px #6B2EFA;

margin: 0 auto;

/*padding: 0 200px;*/

 

}

.left2,.center2,.right2{

float: left;

}

.left2{

width: 100px;

height: 600px;

background-color: #FAF60D;

/*margin-left: -100%;*/

position: absolute;

/*left: 100px;*/

}

.center2{

width: 100%;

height: 600px;

background-color: #F90BFA;

box-sizing: border-box;

padding: 0 100px;

 

}

.right2{

width: 100px;

height: 600px;

background-color: #FA5230;

margin-left: -100px;

/*position: relative;*/

/*right: -100px;*/

}

 

 

三个子元素全部开启左浮动，第一个子元素和第二个子元素

开启定位

 

.wrap {

width: 100%;

height: 600px;

border: 10px solid lightslategray;

margin: 0 auto;

 

padding: 0 100px;

}

.left,.center,.right {

float: left;

}

.left {

width: 100px;

height: 600px;

background-color: lightcoral;

 

margin-left: -100%;

 

position: relative;

left: -100px;

}

.right {

width: 100px;

height: 600px;

background-color: lightsalmon;

 

margin-left: -100px;

 

position: relative;

right: -100px;

}

.center {

width: 100%;

height: 600px;

background-color: lightseagreen;

 

}

 

圣杯布局

 

header,footer {

width: 800px;

height: 100px;

background-color: lightslategray;

border: 10px solid hotpink;

margin: 0 auto;

}

.wrap {

width: 600px;

height: 600px;

border: 10px solid hotpink;

margin: 0 auto;

/* 为父级元素设置左右内边距 – 留出空白区域(放置定宽) */

padding: 0 100px;

}

.left,.center,.right {

float: left;

}

.left {

width: 100px;

height: 600px;

background-color: lightcoral;

 

margin-left: -100%;

/* 将定宽元素移动到空白区域上 */

position: relative;

left: -100px;

}

.right {

width: 100px;

height: 600px;

background-color: lightsalmon;

 

margin-left: -100px;

 

position: relative;

right: -100px;

}

.center {

width: 100%;

height: 600px;

background-color: lightseagreen;

 

 

}

 

 

双飞翼布局

 

header,footer {

width: 800px;

height: 100px;

background-color: lightslategray;

border: 10px solid hotpink;

margin: 0 auto;

}

.wrap {

width: 800px;

height: 600px;

border: 10px solid hotpink;

margin: 0 auto;

}

.left,.center,.right {

float: left;

}

.left {

width: 100px;

height: 600px;

background-color: lightcoral;

 

margin-left: -100%;

}

.right {

width: 100px;

height: 600px;

background-color: lightsalmon;

 

margin-left: -100px;

}

.center {

width: 100%;

height: 600px;

background-color: lightseagreen;

 

 

}

.inner {

height: 600px;

background-color: lightgoldenrodyellow;

margin: 0 100px;

}