CSS页面布局笔记_html/css_WEB-ITnose
程序员文章站
2022-05-07 13:14:38
...
居中布局
水平居中
父元素和子元素的宽度都未知
inline-block + text-ailgn
.child{display:inline-block;}.parent{text-align:center;}
优点:兼容性好
缺点:子元素文本继承了text-align属性,子元素要额外加text-align:left;
table + margin
.child{display:table; margin:0 auto;}
优点:只需要设置子元素的样式
absolute + transform
.parent{position:relative;}.child{position:absolute; left:50%; transform: translateX(-50%);
优点:居中子元素不会对其他元素产生影响
缺点:transform是CSS3的属性,存在兼容性问题
flex + justify-content
.parent{display:flex; justify-content:center;}
优点:只需要设置父元素的样式
缺点:兼容性问题
flex + margin
.parent{display:flex;}.child{margin:0 auto;}
垂直居中
父容器和子容器的高度都未知
table-cell + vertical-align
.parent{display:table-cell; vertical-align:middle;}
优点:兼容性好
absolute + transform
.parent{position:relative;}.child{position:absolute; top:50%; transform:translateY(-50%);}
优点:子元素不会干扰其他元素
缺点:兼容性
flex + align-item
.parent{display:flex; align-items:center;}
优点:只需要设置父元素
缺点:兼容性问题
水平垂直居中
父容器和子容器的高度都未知
inline-block + text-align + table-cell + vertical-align
.parent{text-align:center; display:table-cell; vertical-align:middle;}.child{display: inline-block;}
absolute + transform
.parent{position:relative;}.child{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);}
flex + justify-content + align-item
.parent{display:flex; justify-content:center; align-items:center;}
上一篇: 关于php类的静态成员深度分析
下一篇: php程序员的基础概念