小伙伴们每次在写网页时会经常遇到需要将元素垂直或水平居中的时候，往往面临着方法的选择，而各种方法有的简单，有的困难，还有的有一些坑，在选择方法时我们应该怎么做才能不走弯路呢？

      话不多说，现在就来分享我的一些方法，在分享之前我先查查秘籍

       咳咳，下面是正式内容，以我们最常见的网页为例

       上图网页中，红框部分内的左右元素都是水平居中显示的，其中既有大小不一的文本又有图片，面对这种情况只要我们解决其中一个，另外三个就很简单了，那么这一个我们应该怎么处理呢

水平居中方法：

      对于元素水平居中常用我们有二种办法：

方法一：text-align:center文本在容器里水平居中，让inline与inline-block在容器里水平居中，text-align添加给父元素。

方法二：margin: 0 aut0; 让一个有宽度的块元素在容器（父元素）里水平居中，margin: 0 auto添加给当前元素。

（除此之外如果知道详细的布局数据。也可以根据情况手动设置margin或padding等元素调整，不过不建议使用，有毒副作用）

图片：

      首先是图片，在选择方法之前，我们应该知道图片的类型是inline-block类型，在选用方法时对于经常使用方法二的人就需要注意，margin: 0 auto;的适用对象是有宽度的块元素，图片本身自然有宽度，但并不是块元素，需要先将其通过display: block；将图片转化为块元素才能使用方法二。

      相比而下，方法一就很简单了，无需转化元素类型，直接在父元素内使用该属性即可。

文本：

      其次是文本，文本的嵌套既有使用inline类型父元素嵌套的，又有使用block类型嵌套的。针对不同的情况，我们选用的方法也不同。

1.嵌套inline类型的父元素，若想水平居中则在父元素下添加text_align:center;

2.嵌套block类型的父元素，若想水平居中则在本身元素下添加margin: 0 auto;

垂直居中方法：

方法一：line-height：行高高度等于容器高度，只能实现单行文本在容器里垂直居中，line-height添加给容器。

方法二：vertical-align: middle;使一个inline-block类型的元素垂直居中。

方法三：通过定位，为需要垂直居中的元素设置absolute类型的定位，然后给父元素设置relative类型的定位，然后

• top:0;
• left:0;
• right:0;
• bottom:0;
• margin:auto;

或者：

• top:50%;
• left:50%;
• margin:-NNpx 0 0 -NNpx;
• /*NN为元素宽高的一半**/

方法二有毒，需要4个条件！！！

1.给当前元素在结构上添加一个弟弟元素（必须和当前元素写在一行上）

2.给当前元素和弟弟添加display：inline-block;

3.给弟弟添加height与父元素同高

4.给当前元素和弟弟元素添加vertical-align：middle;

 

      所以对于文本，我们使用方法一简单方便。对于元素类型为inline-block的图片，我们使用方法二或方法三都可以。对于block类型，我们就使用方法三。

      再回到我们的网页，其实还是水平居中用的较多，水平居中设置完毕后，垂直方向的距离可以用margin与padding进行调整，这样很快就写好了。

      其实最主要的合适头脑清晰，合理选择方法，选对了就会写的顺利，否则选错方法就这一堆堆的坑填都填不完，成都web前端培训。

 

一，水平居中

方法① ：行内元素 （父元素）text-align，（子元素）inline-block

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

总结：

优点：兼容性好，支持低版本浏览器

缺点：需要同时在父元素和子元素上设置

适用场景：子元素数量少（或只有一个），并且需要兼容低版本浏览器时使用，不受float影响

 

方法②：块状元素   使用margin:0 auto来实现

.child{width:200px;margin:0 auto;} 

优点：兼容性好

 

缺点：需要指定宽度

前提：用于子元素上，不受float影响

方法③：（子元素）display:table;margin:0 auto;

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

优点：只需要对自身进行设置

缺点：不兼容IE6和IE7

适用场景：子元素数量多，不方便修改父元素的属性，对浏览器版本要求相对较低时使用

 

方法④：决定定位实现 （父元素）position:relative，（子元素）absolute+left+transform（translateX(-50%)）

 

.parent{position:relative;}
/*或者实用margin-left的负值为盒子宽度的一半也可以实现，不过这样就必须知道盒子的宽度，但兼容性好*/
.child{position:absolute;left:50%;transform:translate(-50%);} 

优点：不影响其他元素

缺点，transform兼容性，IE9及以上可用

 

方法⑤：flex+justify-content/margin

/*第一种方法*/
.parent{display:flex;justify-content:center;}
/*第二种方法*/
.parent{display:flex;}
.child{margin:0 auto;} 

第一种方法：

优点：只设parent

缺点：flex兼容性差，而且比较耗资源

第二种方法：

优点：代码简单

缺点：污染父元素，flex兼容性问题，如果进行大面积的布局可能会影响效率

 

二，垂直居中

 

方法① ：单行文本 设置line-height等于父元素高度

.child{ height:20px; line-height:20px} 

优点：代码简单

缺点：只适合一行文本，多行文本则不可以

这是一种很流行的方法, 也适应IE7.

 

方法② ：行内块级元素  使用display:inline-block; vertical-align:middle;

.child{display:inline-block; vertical-align:middle}
.parent:after{display:inline-block; vertical-align:middle} 

方法③ ：块级元素 使用vertical-align的时候，由于对齐的基线是用行高的基线作为标记，故需要设置line-height或设置display:table-cell;

/*第一种方法*/
.parent{display:table-cell;vertical-align:middle;height:20px;}
/*第二种方法*/
.parent{display:inline-block;vertical-align:middle;line-height:20px;} 

优点：兼容性比较好，换成table可以兼容IE6,7

缺点：table-cell不能和float、position:absolute同时设置。（只能在外parent外套一层div.wrap才能设置float）

 

若元素的高度不一定的话

 

vertical-align只有在父层为 td 或者 th 时, 才会生效, 对于其他块级元素, 例如 div、p 等, 默认情况是不支持的. 为了使用vertical-align, 我们需要设置父元素display:table, 子元素 display:table-cell;vertical-align:middle;

/*第一种方法*/
.parent{display:table}
.child{display:table-cell;vertical-align:middle;}

 

优点：元素高度可以动态改变，不需要css定义，如果父元素有足够空间，该元素不会被截断

缺点：IE6、7，甚至IE8 beta中无效

 

 

方法④：使用绝对定位

.parent{position:relative;}

.child{positon:absolute;top:50%;transform:translate(0,-50%);}

优点：基本只设置子元素，不影响其他元素

缺点：transform兼容性问题

方法⑤：使用flex实现方法 （父）flex + align-items

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

优点：只要设置parent

缺点：flex和align-items的兼容性

 

 

三、【终极需求】水平垂直同时居中！

方法①：元素高度固定

.parent{position:relative;}
.child{position:absolute;top:50%;left:50%;width:固定;height:固定;margin-top:-0.5*高度;margin-left:-0.5*宽度;}

适用于所有浏览器

方法②：元素高度固定

.parent{position:relative;}
.child{position:absolute;width:固定;height:固定;top:0;left:0;right:0;bottom:0;margin:auto;}

适用于所有浏览器

方法③：（父）text-align + table-cell + vertical-align，（子）inline-block（兼容性方案）

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

 

方法④：使用绝对定位

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

优点：基本只设置子元素，不影响其他元素

缺点：transform兼容性问题

 

方法⑤：利用flex实现

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

优点：只要设置parent

缺点：flex和align-items的兼容性

 

 

 

第一种

利用伪类元素居中

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>五大居中1</title>
<style>
*{margin:0;}
div{width:200px;height:300px;border:2px solid #000;margin:200px auto;
text-align:center;font-size:0;
}
div p{width:100px;height:100px;background:#666;
display:inline-block;vertical-align:middle;
}
div:after{content:"";display:inline-block;height:100%;vertical-align:middle;}


</style>
</head>
<body>

<div>
	<p></p>
</div>

</body>
</html>

这种居中方式适合两个元素套在一起，然后居中子元素的方式

第二种

定位居中

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>五大居中2</title>
<style>
*{margin:0;}
div{width:200px;height:300px;border:2px solid #000;position:absolute;
left:0;right:0;top:0;bottom:0;margin:auto;
}


</style>
</head>
<body>

<div>
	<p></p>
</div>

</body>
</html>

个人比较喜欢这种居中方式，配合margin使用，简单粗暴。

第三种

定位居中2

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>五大居中3</title>
<style>
*{margin:0;}
div{width:200px;height:300px;border:2px solid #000;position:absolute;
left:50%;top:50%;margin:-150px 0 0 -100px;
}


</style>
</head>
<body>

<div>
	<p></p>
</div>

</body>
</html>

这种居中方式也还挺好用，但是前提是要知道元素的属性，个人不太喜欢这个。

第四种

定位居中3

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>五大居中4</title>
<style>
*{margin:0;}
div{width:200px;height:300px;border:2px solid #000;position:absolute;
left:50%;top:50%;transform:translate(-50%,-50%);
}


</style>
</head>
<body>

<div>
	<p></p>
</div>

</body>
</html>

这个居中方式的话是有一定的兼容性的，因为要用到transform 这个属性，但是同样很简单。

第五种

弹性盒居中1

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>五大居中5</title>
<style>
*{margin:0;}
html,body{height:100%;}
body{display:flex;justify-content:center;align-items:center;}
div{width:200px;height:300px;border:2px solid #000;}


</style>
</head>
<body>

<div>

</div>

</body>
</html>

弹性盒居中方式，给父元素设置弹性盒模型，配合justify-content:center;align-items:center。

第六种

弹性盒居中2

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>五大居中5</title>
<style>
*{margin:0;}
html,body{height:100%;}
body{display:flex;}
div{width:200px;height:300px;border:2px solid #000;margin:auto;}


</style>
</head>
<body>

<div>

</div>

</body>
</html>

这也是我最喜欢的居中方式，直接给父元素设置弹性盒，子元素margin：auto。