CSS居中完全解决方案_html/css_WEB-ITnose-html教程-PHP中文网

CSS居中完全解决方案_html/css_WEB-ITnose

php中文网

发布： 2016-06-24 11:56:44

原创

1096人浏览过

上次面试面试官问到了，问了个定宽局中和不定宽局中，下来我把所有有关css居中都总结了一下

原文摘自我的前端博客，欢迎大家来访问

http://www.hacke2.cn

水平居中

行内元素

把行内元素嵌套在一个DIV中，并且在DIV中设置以下样式

a{ text-align: center; }

登录后复制

块级元素

对于定宽的块级元素，我们要设置起margin-top,margin-right 为auto

.center{ margin: 0 auto; }

登录后复制

多个块级元素(inline-block)

多个块级元素，我们将其display设置为inline-block；然后将父级元素设置一下属性

立即学习“前端免费学习笔记（深入）”；

div{ text-align: center; }

登录后复制

多个块级元素(flex)

设置需要水平居中的块状元素的父元素display为flex ，并且justify-content属性为center即可

body{ display: flex; justify-content: center; }

登录后复制

垂直居中

单行行内元素

将行内元素的height和line-height设置为一致即可

a{ height: 200px; line-height:200px; }

登录后复制

多行行内元素

如果行内元素文字过多产生多行，则在父级元素设置display: table-cell;vertical-align:middle;

.container{ width: 300px; height: 300px; display: table-cell; vertical-align:middle; }

登录后复制

已知高度的块级元素

将块级元素设置绝对定位，top为50%，margin-top:-height/2

div{ height: 100px; position: absolute; top: 50%; margin-top: -50px; padding:0; }

登录后复制

未知高度的块级元素

使用CSS translate,将块级元素设置绝对定位，top为50%，transform: translateY(-50%);

div{ position: absolute; top: 50%; transform: translateY(-50%); padding:0; }

登录后复制

水平垂直居中

已知高度、宽度的元素

将块级元素设置绝对定位，top为50%，left:50%;margin-top:-height/2;margin-left:-width/2

div{ width: 150px; height: 150px; position: absolute; top: 50%; left: 50%; margin-top: -75px; margin-left: -75px; }

登录后复制

已知高度、宽度的元素(flex)

给父级使用flex布局

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

登录后复制

未知高度、宽度的元素

使用CSS translate

div{ position:absolute; top:50%; left:50%; -webkit-transform:translate(-50%,-50%); -moz-transform:translate(-50%,-50%); transform:translate(-50%,-50%); }

登录后复制

CSS居中完全解决方案_html/css_WEB-ITnose

行内元素

块级元素

多个块级元素(inline-block)

多个块级元素(flex)

单行 行内元素

多行 行内元素

已知高度的块级元素

未知高度的块级元素

已知高度、宽度的元素

已知高度、宽度的元素(flex)

未知高度、宽度的元素

单行行内元素

多行行内元素