网页居中方法详解

2019独角兽企业重金招聘Python工程师标准>>>

以前从网上看到的网页中元素居中方法不过是margin:0 auto和text-align:center而已。可是应用的时候却不一定会居中。今天读了《编写高质量代码——Web前端开发修炼之道》上的讲解才恍然大悟。下面分享给大家：

1. 水平居中

（1）对父元素设置样式为text-align:center，则内部元素居中。

应用场景：要求内部元素为文本、图片等行内元素

（2）对待居中元素本身设置样式为margin-left:auto;margin-right:auto（有时简写为margin:0 auto）

应用场景：要求该元素是确定宽度的块级元素

（3）将待居中元素包含在table标签中，然后对table设置样式为margin-left:auto和margin-right:auto

应用场景：要求该元素是不确定宽度的块级元素

缺点：增加了无语义标签，加深了标签的嵌套层数。

（4）将待居中元素修改为display:inline，然后对其设置样式为text-align:center

应用场景：要求该元素是不确定宽度的块级元素

优点：不用增加无语义标签，简化标签的嵌套深度

缺点：块级元素改为inline之后缺少了一些功能，如设置长宽等

（5）对父元素设置样式为float:left、position:relative和left:50%，然后对子元素设置样式为float:left、position:relative和left:-50%

应用场景：要求该元素是不确定宽度的块级元素

优点：不用把块级元素改为行内元素，也不增加无语义标签，不增加嵌套深度

缺点：设置position:relative会带来副作用

2. 竖直居中

（1）对父元素设置样式为相同的上下边距，即padding-top和padding-bottom相同

应用场景：针对父元素高度不确定的文本、图片、块级元素

（2）对父元素设置样式line-height的值与父元素的height的值相同

应用场景：针对父元素高度确定的单行文本

（3）将待居中元素嵌入表格table的td或th中（td标签默认设置vertical-align为middle，所以不需要再设置）

应用场景：针对父元素高度确定的多行文本、图片、块级元素

优点：无副作用

缺点：添加无语义标签，增加嵌套深度

（4）对IE8和Firefox设置父元素样式为display:table-cell和vertical-align:middle。对于不支持table-cell的IE6/7采用hack

hack：对祖父元素设置样式为:*position:relative，对父元素设置样式为:*position:absolute;*top:50%，对待居中元素设置样式为:*position:relative;*top:-50%

应用场景：针对父元素高度确定的多行文本、图片、块级元素

优点：没有增加额外标签

缺点；使用hack，不利于维护。position的设置可能带来副作用。

转载于:https://my.oschina.net/warmcafe/blog/83857