点击下载
本文文档

当前位置：首页 - 科技 - 知识百科 - 正文

css中几种实现居中样式技术优缺点代码详解

来源：懂视网责编：小采时间：2020-11-27 18:50:36

css中几种实现居中样式技术优缺点代码详解

css中几种实现居中样式技术优缺点代码详解:负外边距(Negative Margins)这或许是当前最流行的使用方法。如果块元素尺寸已知，可以通过以下方式让内容块居中于容器显示：外边距margin取负数，大小为width/height（不使用box-sizing: border-box时包括padding，）的一半，再加上top: 50%

推荐度：

点击下载本文 文档为doc格式

导读css中几种实现居中样式技术优缺点代码详解:负外边距(Negative Margins)这或许是当前最流行的使用方法。如果块元素尺寸已知，可以通过以下方式让内容块居中于容器显示：外边距margin取负数，大小为width/height（不使用box-sizing: border-box时包括padding，）的一半，再加上top: 50%

负外边距(Negative Margins)

这或许是当前最流行的使用方法。如果块元素尺寸已知，可以通过以下方式让内容块居中于容器显示：

外边距margin取负数，大小为width/height（不使用box-sizing: border-box时包括padding，）的一半，再加上top: 50%; left: 50%;。即：

.is-Negative { 
 width: 300px; 
 height: 200px; 
 padding: 20px; 
 position: absolute; 
 top: 50%; left: 50%; 
 margin-left: -170px; /* (width + padding)/2 */ 
 margin-top: -120px; /* (height + padding)/2 */ 
}

测试表明，这是唯一在IE6-IE7上也表现良好的方法。

优点：

1. 良好的跨浏览器特性，兼容IE6-IE7。

2. 代码量少。

缺点：

1. 不能自适应。不支持百分比尺寸和min-/max-属性设置。

2. 内容可能溢出容器。

3. 边距大小与padding,和是否定义box-sizing: border-box有关，计算需要根据不同情况。

变形（Transforms）

这是最简单的方法，不近能实现绝对居中同样的效果，也支持联合可变高度方式使用。内容块定义transform: translate(-50%,-50%)必须带上浏览器厂商的前缀，还要加上

top: 50%; left: 50%;

代码类：

.is-Transformed { 
 width: 50%; 
 margin: auto; 
 position: absolute; 
 top: 50%; left: 50%; 
 -webkit-transform: translate(-50%,-50%); 
 -ms-transform: translate(-50%,-50%); 
 transform: translate(-50%,-50%); 
}

优点：

1. 内容可变高度

2. 代码量少

缺点：

1. IE8不支持

2. 属性需要写浏览器厂商前缀

3. 可能干扰其他transform效果

4. 某些情形下会出现文本或元素边界渲染模糊的现象

进一步了解transform实现居中的知识可以参考CSS-Tricks的文章《Centering PercentageWidth/Height Elements》

表格单元格（Table-Cell）

总的说来这可能是最好的居中实现方法，因为内容块高度会随着实际内容的高度变化，浏览器对此的兼容性也好。最大的缺点是需要大量额外的标记，需要三层元素让最内层的元素居中。

HTML：

<div class="Center-Container is-Table"> 
 <div class="Table-Cell"> 
 <div class="Center-Block"> 
 <!-- CONTENT --> 
 </div> 
 </div> 
</div>

CSS：

.Center-Container.is-Table { display: table; } 
.is-Table .Table-Cell { 
 display: table-cell; 
 vertical-align: middle; 
} 
.is-Table .Center-Block { 
 width: 50%; 
 margin: 0 auto; 
}

优点：

1. 高度可变

2. 内容溢出会将父元素撑开。

3. 跨浏览器兼容性好。

缺点：

需要额外html标记

十二、行内块元素（Inline-Block）

很受欢迎的一种居中实现方式，基本思想是使用display: inline-block, vertical-align: middle和一个伪元素让内容块处于容器中央。

如果内容块宽度大于容器宽度，比如放了一个很长的文本，但内容块宽度设置最大不能超过容器的100%减去0.25em，否则使用伪元素:after内容块会被挤到容器顶部，使用:before内容块会向下偏移100%。

如果你的内容块需要占据尽可能多的水平空间，可以使用max-width: 99%;（针对较大的容器）或max-width: calc(100% -0.25em)（取决于支持的浏览器和容器宽度）。

HTML：

<div class="Center-Container is-Inline"> 
 <div class="Center-Block"> 
 <!-- CONTENT --> 
 </div> 
</div>

CSS：

.Center-Container.is-Inline { 
 text-align: center; 
 overflow: auto; 
} 
 
.Center-Container.is-Inline:after, 
.is-Inline .Center-Block { 
 display: inline-block; 
 vertical-align: middle; 
} 
 
.Center-Container.is-Inline:after { 
 content: ''; 
 height: 100%; 
 margin-left: -0.25em; /* To offset spacing. May vary by font */ 
} 
 
.is-Inline .Center-Block { 
 max-width: 99%; /* Prevents issues with long content causes the content block to be pushed to the top */ 
 /* max-width: calc(100% - 0.25em) /* Only for IE9+ */ 
}

这种方法的优劣和单元格Table-Cell方式差不多，起初我把这种方式忽略掉了，因为这确实是一种hack方法。不过，无论如何，这是很流行的一种用法，浏览器支持的也很好。

优点：

1. 高度可变

2. 内容溢出会将父元素撑开。

3. 支持跨浏览器，也适应于IE7。

缺点：

1.需要一个容器

2.水平居中依赖于margin-left: -0.25em;该尺寸对于不同的字体/字号需要调整。

3.内容块宽度不能超过容器的100% - 0.25em。

Flexbox

这是CSS布局未来的趋势。Flexbox是css3新增属性，设计初衷是为了解决像垂直居中这样的常见布局问题。记住Flexbox不只是用于居中，也可以分栏或者解决一些令人抓狂的布局问题。

优点：