水平居中：
1.设置元素为文本或者图片等行内元素时，可以通过“text-align:center;”来实现。
2.当设置的元素为块状元素时，text-align:center; 就不起作用了，这时候分两种情况：
1) 定宽块状元素
i.通过设置“margin:0 auto;” 即可实现。
ii.设置 position:absolute 和 left 50%，利用相对父元素绝对定位的方式，将元素左偏移50%，然后将margin-left设为负的宽度的一半。
2) 不定宽块状元素
① 加入 table 标签；
② 设置 display:inline 方法，然后 text-align:center 实现。与第一种类似，显示类型设为行内元素；
优势：不用增加无语义标签
缺点：变成了行内元素，少了一些功能，例如长度。
3）多个块状元素解决方案
将元素的display属性设置为inline-block，并且把父元素的text-align属性设置为center即可:
.parent {
text-align:center;
}
4）多个块状元素解决方案 (使用 flexbox布局实现)
使用flexbox布局，只需要把待处理的块状元素的父元素添加属性display:flex及justify-content:center即可:
.parent {
display:flex;
justify-content:center;
}
垂直居中：
1.父元素确定高度的单行文本
通过设置子行内元素 line-height 与 height 相同且都为父元素高度即可完成。
缺点：当文字内容的长度大于块的宽时，就有内容脱离了块。
2.父元素高度确定的多行文本
1) 使用 padding-top 和 padding-bottom 来居中。
利用父元素高度减去文本高度，所得的值平分到 top bottom，达到居中的目的。
2)设置块级元素的 display 为 table-cell (设置为表格单元显示)，激活 vertical-align：middle; 属性。
优点：不用加多余的无意义的标签
缺点：兼容性差，且修改了 display 的 block 变成了 table-cell，破坏了原有的块状元素的性质。
3)已知高度的块状元素解决方案
.item{
top: 50%;
margin-top: -50px; /* margin-top值为自身高度的一半 */
position: absolute;
padding:0;
}
水平垂直居中
其实就是把水平居中的方式和垂直居中的方式组合在一起，先实现一个，再实现另一个。
方案1:
.item{
position: absolute;
margin:auto;
left:0;
top:0;
right:0;
bottom:0;
}
方案2：
.item{
position: absolute;
top: 50%;
left: 50%;
margin-top: -xx px; /* 设置margin-left / margin-top 为自身高度的一半 */
margin-left: -xx px;
}
方案3:
.item{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
方案4：
.item{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); /* 使用css3的transform来实现 */
}
方案5：使用flex布局实现
.parent{
display: flex;
justify-content:center;
align-items: center;
/* 注意这里需要设置高度来查看垂直居中效果 */
background: #AAA;
height: 300px;
}
6 display：tabel
.parent {
display: table;
}
.son-wraper {
display: table-cell;
vertical-align: middle;
}
son {
margin: auto;
overflow-wrap: break-word;
height: auto;
max-height: 80%;
max-width: 80%;
}
7.display: inline-block
.parent {
text-align: center;/*必填*/
overflow: auto;
}
.son {
display: inline-block;/*必填*/
vertical-align: middle;/*要填，不填默认baseline会因为跟后面parent：after vertiacl-align：middle的垂直对其方式不同高度会上升一点儿*/
width: auto;
height: auto;
max-width: 90%;
max-height: 90%;
}
.parent:after {
content: '';/*必填*/
display: inline-block;/*必填*/
vertical-align: middle;/*必填*/
height: 100%;/*必填*/
margin-left: -0.25em;/*去除inline-block元素之间因换行产生的空隙*/
}
实现原理：利用inline-block的vertical-align: middle去对齐after伪元素，after伪元素的高度与父对象一样，就实现了高度方向的对齐。居中块的尺寸可以做包裹性、自适应内容，兼容性也相当好。缺点是水平居中需要考虑inline-block间隔中的留白（代码换行符遗留问题。）
8 display: flex-box
三列布局：
第一种：
要求：
左右固定宽度，中间自适应。
第一种：
一个大盒子包括三个小盒子，一个盒子定宽度后左浮，一个盒子定宽度后右浮，使它们脱离文档流，中间的盒子宽度100%，继承父盒子宽度达到自适应的效果，然后设置左右边距，长度足以超出左右盒子的宽度就可以了，要不然中间内容区的内容会被左右浮动的盒子遮挡，注意，在html结构中，左右盒子顺序无所谓，中间的盒子一定要写在最后面，让浮动的盒子先上去，否则浮动的盒子就会顶着中间盒子的下边界浮动在中间盒子的下面。
第二种：
同样三个盒子，左盒子左浮，右盒子右浮，父盒子相对定位，中间的盒子用绝对定位，这样在html结构中就可以把中间的盒子放在前面了，达到优先渲染的效果，然后left设为左盒子的宽的，right设为右盒子的宽度，top，bottom设为0，就可以了。不同的是中间盒子的宽度不能再是100%了，要设置成auto，默认值就是；而要把父盒子的宽度设为100%，让父盒子自适应，利用左右的定位拉伸压缩中间的盒子，改变其宽度。
网友评论