水平居中:行内元素解决方案

方法:只需要把行内元素放在一个属性display为block的父元素中,并且把父元素的text-align属性设置成center

行内元素水平居中

水平居中:块状元素解决方案

方法:子块元素使用margin:0 auto;

缺点:只适合已知宽高的块元素
水平居中块状元素

水平居中:多个块状元素解决方案

方法:将子元素的display属性设置为inline-block,并且把父元素的text-align属性设置成center

水平居中多个块状元素1
水平居中多个块状元素2
水平居中多个块状元素3
水平居中多个块状元素4

水平居中:多个块状元素解决方案(使用flexbox布局实现)

方法:把父元素设置成:dispaly:flex;justify-content:center;

缺点:CSS3弹性布局低版本浏览器不兼容,适合在移动端使用
水平居中多个块状元素1
水平居中多个块状元素2
水平居中多个块状元素3
水平居中多个块状元素4

垂直居中:单行的行内元素解决方案

方法:将要垂直居中的子元素行内元素的height和line-height属性的值设置成和父元素一样的高度即可

垂直居中单行的行内元素 垂直居中单行的行内元素 垂直居中单行的行内元素

垂直居中:多行的行内元素解决方案

方法:组合使用display:table-cell和vertical-align:middle属性来定义需要居中的元素的父元素

垂直居中多行行内元素 垂直居中多行行内元素 垂直居中多行行内元素 垂直居中多行行内元素

垂直居中:已知高度的块状元素解决方案

方法:将父元素设置成:position:relative,子元素:position:absolute;top:50%;margin-top:-(子元素高度的一半)

垂直居中已知高度的块状元素

垂直居中:未知高度的块状元素解决方案

方法:将父元素设置成:position:relative,子元素使用:position:absolute; top:50%; transform:translateY(-50%)

缺点:使用了CSS3属性transform,IE9以下版本不兼容
垂直居中未知高度的块状元素

水平垂直居中:已知宽度和高度的块状元素解决方案1

方法:将父元素设置成:position:relative,子元素使用:position:absolute;top:0;left:0;left:0;right:0;bottom:0;margin:auto;

水平垂直居中已知宽度和高度的块状元素

水平垂直居中:已知宽度和高度的块状元素解决方案2

方法:父元素设置成:position:relative,子元素使用:position:absolute;top:50%;left:50%;margin-top:-(子元素高度的一半);margin-left:-(子元素宽度的一半);

水平垂直居中已知宽度和高度的块状元素

水平垂直居中:未知宽度和高度的块状元素解决方案

方法:父元素设置成:position:relative,子元素使用:position:absolute;top:50%;left:50%;transform:translate(-50%, -50%)

缺点:使用了CSS3属性transform,IE9以下不兼容
水平垂直居中未知宽度和高度的块状元素

水平垂直居中:使用flex布局实现

方法:父元素使用:display:flex; align-items:center; justify-content:center;

缺点:使用了flex布局,低版本浏览器不兼容,适合移动端(首选)
水平垂直居中未知宽度和高度的块状元素