-
注释及其解释
查看全部 -
当前元素对父元素居中
查看全部 -
垂直居中布局 父元素设置css 改变子元素，同时影响父元素 display：table-cell vertical-align：middle
查看全部 -
公式：间距+容器宽度=（间距+列宽度）✖N（列数）
查看全部 -
两列布局
两列布局一般情况下是指宽度与自适应布局，两列中左列是确定的宽度，右列是自动填满剩余所有空间的一种布局效果。
实现方式：
float +margin
float+overflow
display属性的table
查看全部 -
居中布局的第二种方案
#parent{
position:relative;
}
children{
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
}
优点：
缺点：transform 和transition 属性属于CSS3，不兼容低版本的I浏览器。
查看全部 -
居中布局第一种方案
#parent{
display:
display：table-cell;
vertical-align:middle;
}
#children{
display:block;
margin：0 auto；
}
优点：兼容性比较好
缺点：为了对子元素进行居中，对父元素设置了CSS样式。
查看全部 -
父元素{
position:absolute;
}
子元素{
position:absolute;
left:50%;
transform:translateY(-50%);
}
优点：父级元素是否脱离文档流，都不影响子级元素的垂直居中效果。
缺点：transform是CSS3新增属性，对浏览器支持情况不好。
查看全部 -
垂直居中第一种方案：
父元素设置: display:table-cell;
vertical-align:middle;
display:table-cell：把当前元素设置为<td>元素（单元格）
vertical-align:用于设置行内元素垂直方向的对齐方式。
top(顶部对齐) middle（居中对齐） bottom（底部对齐）
优点：display:table-cell 和vertical-align属于CSS2的内容，CSS2对大部分浏览器兼容性比较好。
缺点：父元素如果有行内元素，也会进行垂直居中。提交
查看全部 -
第三种水平居中方案
子元素设置 absolute 父元素设置relative/absolute 目的：相对于父元素进行定位
子元素设置 left:50%;(向右移动宽度为父元素的50%)
transfrom:translate(-50%);（想左移动本身宽度的50%）
查看全部 -
第二种水平居中方案
display:block/table +margin: 0 auto ;
优点：针对宽度确定的块级元素，子元素只需要设置 margin:0 auto 即可
缺点：如果水平居中元素脱离了文档流，导致margin失效，则无法水平居中
查看全部 -
第一种水平居中方案
text-align +display:inline-block
优点：兼容性较好
缺点：text-align 属性针对子元素的行内元素也生效，如果对子元素的行内元素有其他位置的变更，需要重新对子元素设置 text-align元素重新赋值。
查看全部 -
居中布局的分类
水平居中
垂直居中
水平居中+垂直居中布局
查看全部 -
给父级元素设置dispaly:table;给子级元素设置display:table-cell;利用不给表格单元设置宽度是，表格单元会自动等分父级元素的宽度的特性，实现等分布局。
查看全部 -
水平居中布局实现方式：
inline-block + text-algin 属性配合使用
table + margin 属性配合使用
absolute + transform 属性配合使用
查看全部
举报
