CSS页面布局笔记_html/css_WEB-ITnose-html教程-PHP中文网

CSS页面布局笔记_html/css_WEB-ITnose

php中文网

发布： 2016-06-24 11:38:28

原创

1292人浏览过

居中布局

水平居中

父元素和子元素的宽度都未知

.child{display:inline-block;}.parent{text-align:center;}

登录后复制

优点：兼容性好
缺点：子元素文本继承了text-align属性，子元素要额外加text-align:left;

.child{display:table; margin:0 auto;}

登录后复制

优点：只需要设置子元素的样式

.parent{position:relative;}.child{position:absolute; left:50%; transform: translateX(-50%);

登录后复制

优点：居中子元素不会对其他元素产生影响
缺点：transform是CSS3的属性，存在兼容性问题

.parent{display:flex; justify-content:center;}

登录后复制

优点：只需要设置父元素的样式
缺点：兼容性问题

.parent{display:flex;}.child{margin:0 auto;}

登录后复制

父容器和子容器的高度都未知

Get笔记

Get笔记，一款AI驱动的知识管理产品

125

.parent{display:table-cell; vertical-align:middle;}

登录后复制

优点：兼容性好

.parent{position:relative;}.child{position:absolute; top:50%; transform:translateY(-50%);}

登录后复制

优点：子元素不会干扰其他元素
缺点：兼容性

.parent{display:flex; align-items:center;}

登录后复制

优点：只需要设置父元素
缺点：兼容性问题

父容器和子容器的高度都未知

.parent{text-align:center; display:table-cell; vertical-align:middle;}.child{display: inline-block;}

登录后复制

.parent{position:relative;}.child{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);}

登录后复制

.parent{display:flex; justify-content:center; align-items:center;}

登录后复制