php布局技巧,关于CSS布局技巧的总结分享

单列布局

水平居中父元素text-align:center;子元素：inline-block;优点：兼容性好；

不足：需要同时设置子元素和父元素

水平居中1

.parent {

width: 500px;

height: 400px;

background: red;

text-align: center;

}

.child {

display: inline-block;

width: 300px;

height: 100px;

background: blue;

}

子元素margin:0 auto;优点：兼容性好

缺点：需要指定宽度

水平居中1

.parent {

width: 500px;

height: 400px;

background: red;

}

.child {

width: 300px;

height: 100px;

background: blue;

margin:0 auto;

}

子元素{display:table;margin:0 auto;}优点:只需要对自身进行设置

不足:IE6,7需要调整结构

水平居中1

.parent {

width: 500px;

height: 400px;

background: red;

}

.child {

width: 300px;

height: 100px;

background: blue;

margin:0 auto;

display:table;margin:0 auto;s

}

父元素：relative；子元素：absolute；left:50%;margin-left:-宽度的一半优点：兼容性好

缺点：需要知道子元素的宽度

水平居中1

.parent {

width: 500px;

height: 400px;

background: red;

position: relative;

top: 0;

left: 0;

}

.child {

width: 300px;

height: 100px;

background: blue;

position: absolute;

top: 0;

left: 50%;

margin-left: -150px;

}

父元素：relative；子元素：absolute；left:50%;transform:translate(-50%,0);优点：兼容性差

缺点：不需要知道子元素的宽度

水平居中1

.parent {

width: 500px;

height: 400px;

background: red;

position: relative;

top: 0;

left: 0;

}

.child {

width: 300px;

height: 100px;

background: blue;

position: absolute;

top: 0;

left: 50%;

transform: translate(-50%,0);

}

弹性盒子：父元素：display:flex;justify-content:center;优点：简单

缺点：兼容性差

水平居中1

.parent {

width: 500px;

height: 400px;

background: red;

display: flex;

justify-content: center;

}

.child {

width: 300px;

height: 100px;

background: blue;

}

垂直居中vertical-align:center;

水平居中1

.parent {

width: 500px;

height: 400px;

background: red;

display:table-cell;

vertical-align:middle;

}

.child {

width: 300px;

height: 100px;

background: blue;

}

垂直居中1

.parent {

width: 500px;

height: 400px;

background: red;

vertical-align:middle;

line-height:450px;

}

.child {

width: 300px;

height: 100px;

background: blue;

display:inline-block;

}

父元素：position:relative;子元素：positon:absolute;top:50%;transform:translate(0,-50%);

垂直居中1

.parent {

width: 500px;

height: 400px;

background: red;

position: relative;

top: 0;

left: 0;

}

.child {

width: 300px;

height: 100px;

background: blue;

position: absolute;

top: 50%;

left:0;

transform: translate(0,-50%);

}

父元素：position:relative;子元素：positon:absolute;top:50%;margin-top:-子元素高度的一半;

父元素：display:flex;align-items:center;

垂直居中1

.parent {

width: 500px;

height: 400px;

background: red;

display: flex;

align-items: center;

}

.child {

width: 300px;

height: 100px;

background: blue;

}

水平垂直居中父元素：display:table-cell;vertical-align:middle;text-align:center;

子元素；display:inline-block;

垂直居中1

.parent {

width: 500px;

height: 400px;

background: red;

display:table-cell;

vertical-align:middle;

text-align:center;

}

.child {

width: 300px;

height: 100px;

background: blue;

display: inline-block;

}

父元素：position:relative;

子元素：position:absolute