CSS实现居中的7种方法_html/css_WEB-ITnose-html教程-PHP中文网

实现html元素的居中看似简单，实则不然

水平居中比如容易，垂直居中比较难搞定，水平垂直都居中更不容易。在这个响应式布局的年代，很难固定元素的宽高，俺统计了一下，目前的几种方法。本文由浅入深逐个介绍，使用了同一段HTML代码：

<div class="center">

登录后复制

</div>

<img src="jimmy-choo-shoe.jpg" alt="">

登录后复制

</div>

</div>

登录后复制

</div>

下面鞋子图片会变化但原始大小始终是500px × 500px，主题背景颜色使用了HSL colors

1.水平居中?使用 text-align

有些场景下简单的方法就是最好的方法

div.center { text-align: center; background: hsl(0, 100%, 97%); }

登录后复制

</div>

div.center img { width: 33%; height: auto; }

登录后复制

</div>

但该方法不能让图片垂直居中：需要给 div 添加 padding 或给 div 中的元素添加 margin-top 和 margin-bottom

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

2. margin: auto 居中

同样也是水平居中，局限性跟第1种方法一样：

div.center { background: hsl(60, 100%, 97%); }

登录后复制

</div>

div.center img { display: block; width: 33%; height: auto; margin: 0 auto; }

登录后复制

</div>

注意 display: block, 这种情况下必须有 margin: 0 auto.

3. table-cell 居中

使用 display: table-cell, 可以实现水平垂直都居中。通常需要添加一个额外的空元素。

<div class="center-aligned">

登录后复制

</div>

<div class="center-core">

登录后复制

</div>

<img  src="jimmy-choo-shoe.jpg" alt="CSS实现居中的7种方法_html/css_WEB-ITnose" >

登录后复制

</div>

</div>

登录后复制

</div>

</div>

登录后复制

</div>

CSS 代码:

.center-aligned { display: table; background: hsl(120, 100%, 97%);width: 100%; }

登录后复制

</div>

.center-core { display: table-cell; text-align: center; vertical-align:middle; }

登录后复制

</div>

.center-core img { width: 33%; height: auto; }

登录后复制

</div>

注意 width: 100% 是为了防止 div 折叠，外面的容器需要一个高度才能垂直居中。如果垂直居中的元素是放在 . body 中的话，需要给 html 和 body 设置 height. 在所有浏览器中均有效，包括 IE8+.

4. Absolute 居中

最近 Stephen Shaw 推广的一项新技术可以很好地兼容各种浏览器。唯一的缺点是外部容器必须声明height

.absolute-aligned {

登录后复制

</div>

position: relative; min-height: 500px;

登录后复制

</div>

background: hsl(200, 100%, 97%);

登录后复制

</div>

.absolute-aligned img {

登录后复制

</div>

width: 50%;

登录后复制

</div>

min-width: 200px;

登录后复制

</div>

height: auto;

登录后复制

</div>

overflow: auto; margin: auto;

登录后复制

</div>

position: absolute;

登录后复制

</div>

top: 0; left: 0; bottom: 0; right: 0;

登录后复制

</div>

Stephen 在他的文章中验证了这段代码的许多版本

居然设计家

居然之家和阿里巴巴共同打造的家居家装AI设计平台

64 </div> </div> 查看详情

</div>

5. 使用 translate 居中

Chris Coiyer 提出了一个新的方法：使用 CSS transforms. 同时支持水平居中和垂直居中:

.center { background: hsl(180, 100%, 97%); position: relative; min-height: 500px; }

登录后复制

</div>

.center img { position: absolute; top: 50%; left: 50%;

登录后复制

</div>

transform: translate(-50%, -50%); width: 30%; height: auto; }

登录后复制

</div>

有以下缺点:

CSS transform 需要针对不同的浏览器使用特定的前缀（-moz 或 -o 或 -webkit）

在低版本的IE (IE8 及以下 )中无效

外部容器需要设置高度 height (or gain it in some other way) 因为它不能从它的absolutely-positioned 内容上获得高度.

如果内容包含 text, 当前浏览器合成技术对文本解释得很模糊.

6. 使用 Flexbox 居中

一旦属性变量和特定前缀消失的话，这种方法很可能成为首选的居中方案.

.center { background: hsl(240, 100%, 97%); display: flex; justify-content: center; align-items: center; }

登录后复制

</div>

.center img { width: 30%; height: auto; }

登录后复制

</div>

在许多方面 flexbox 是最简单的解决方案，但制约因素是各种陈旧语法和低版本的IE， (尽管 display: table-cell是一个可以接受的方案). 完整的 CSS代码:

.center { background: hsl(240, 100%, 97%);

登录后复制

</div>

display: -webkit-box; /* OLD: Safari, iOS 6 and earlier; Android browser, older WebKit */

登录后复制

</div>

display: -moz-box; /* OLD: Firefox (can be buggy) */

登录后复制

</div>

display: -ms-flexbox; /* OLD: IE 10 */

登录后复制

</div>

display: -webkit-flex; /* FINAL, PREFIXED, Chrome 21+ */

登录后复制

</div>

display: flex; /* FINAL: Opera 12.1+, Firefox 22+ */

登录后复制

</div>

-webkit-box-align: center;

登录后复制

</div>

-moz-box-align: center;

登录后复制

</div>

-ms-flex-align: center;

登录后复制

</div>

-webkit-align-items: center;

登录后复制

</div>

align-items: center;

登录后复制

</div>

-webkit-box-pack: center;

登录后复制

</div>

-moz-box-pack: center;

登录后复制

</div>

-ms-flex-pack: center;

登录后复制

</div>

-webkit-justify-content: center;

登录后复制

</div>

justify-content: center;

登录后复制

</div>

现在规范已经形成，浏览器也支持， I have written extensively on flexbox layout and its uses.

7. 使用 calc 居中

在某些场景下比 flexbox 更通用:

.center { background: hsl(300, 100%, 97%); min-height: 600px; position:relative; }

登录后复制

</div>

.center img { width: 40%; height: auto; position: absolute; top:calc(50% - 20%); left: calc(50% - 20%); }

登录后复制

</div>

显而易见, calc 允许在当前的页面布局上进行计算。在上面的例子中，50% 是容器中元素的中间点，但是单独使用会使得image的左上角位于

中间。我们需要把width 和height 再往回拉一下，大小分别是图片width 和height 的一半。表达式如下:

top: calc(50% - (40% / 2)); left: calc(50% - (40% / 2));

登录后复制

</div>

在目前的浏览器中，你可以发现：当内容 fixed 且大小已知的时候，该技术效果最佳:

.center img { width: 500px; height: 500px; position: absolute; top:calc(50% - (300px / 2)); left: calc(50% - (300px ? 2)); }

登录后复制

</div>

calc 这种方法跟 flexbox 一样也有很多潜在的缺点: 支持Firefox 4 及更高版本浏览器，对于更早版本的浏览器，需要添加前缀，不支持IE8。图片居中的完整代码:

.center img { width: 40%; height: auto; position: absolute;

登录后复制

</div>

top: -webkit-calc(50% - 20%); left: -webkit-calc(50% - 20%);

登录后复制

</div>

top: -moz-calc(50% - 20%); left: -moz-calc(50% - 20%);

登录后复制

</div>

top: calc(50% - 20%); left: calc(50% - 20%); }

登录后复制

</div>

当然还有很多其他的方法，例如使用伪元素来垂直居中 , 理解这些技术可以让web开发人员在处理居中问题的时候不麻爪！

原文在这里

</div>

HTML速学教程(入门课程)

HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！

下载

来源：php中文网

上一篇：（一）CSS3动画应用下一篇：CSS高效开发实战:CSS 3、LESS、SASS、Bootstrap、Foundation 读书笔记（1）设定背景图_html/css_WEB-ITnose

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

2025-11-14 02:13:35

403

如何解决Eclipse HTML CSS联动的处理方法确保HTML正确引用CSS，使用相对路径如../css/style.css；2.在Eclipse中将.css和.html文件关联至对应编辑器并启用CSS验证；3.修改后按F5刷新，执行ProjectClean并清除浏览器缓存；4.使用外部浏览器测试或安装WildWebDeveloper插件提升兼容性。

2025-11-13 23:54:07

623

如何解决在线HTML编辑器加载慢的详细步骤在线HTML编辑器加载慢可通过优化网络请求、精简配置、提升前端性能和改善后端环境解决。启用CDN加速、合并压缩资源、延迟加载非核心功能可提升资源获取效率；按需引入模块、禁用冗余UI组件、选用轻量级方案能减少初始负担；采用懒加载、IntersectionObserver和WebWorker可优化渲染与执行性能；同时应优化服务器响应、使用HTTP/2并监控第三方服务稳定性，确保整体加载流畅。

2025-11-13 23:44:02

596

html代码怎么定义列表_html定义列表标签写法与实际应用方法有序列表用定义，自动编号可自定义类型与起始值；无序列表用表示，列表项前显示圆点；定义列表用配合和展示术语与解释；三者可嵌套使用以构建多层级结构。

2025-11-13 23:42:06

837

Mac M1芯片用Parallels运行Windows写HTML教程首先在M1Mac上通过Parallels安装Windows11forARM，再部署VSCode与Edge浏览器，配置LiveServer实现HTML预览，最后共享Mac文件夹实现跨系统开发协作。

2025-11-13 23:41:02

356

html文档转换器_html文档转换网页版工具答案：可在Zamzar网页版工具中使用，访问https://www.zamzar.com/convert/html-to-pdf/，支持HTML转PDF、DOC等格式，无需安装软件，上传文件或输入链接即可在线转换，保留排版结构，跨平台兼容，无需注册，文件24小时内自动删除，保障隐私安全。

2025-11-13 23:39:36

208

手机HTML网页编辑器入口 HTML编辑器手机在线免费手机HTML网页编辑器入口位于https://www.tutorialspoint.com/codingground，该平台支持多语言在线编码、实时预览、无需安装、适配移动端，提供语法高亮、示例模板、多标签编辑、文件导出与分享功能，兼容安卓和iOS系统，适合初学者学习与小型项目开发。

2025-11-13 23:19:02

371

Linux Ubuntu用BrowserSync同步HTML与CSS多设备首先安装Node.js和npm，再全局安装BrowserSync，进入项目目录启动服务器并监听HTML与CSS文件，通过局域网IP在多设备访问，修改代码后页面自动同步刷新，支持CSS热替换，需确保设备同Wi-Fi且端口开放。

2025-11-13 23:05:19

188

Mac用MAMP快速启动HTML测试服务器方法使用MAMP可在Mac上快速搭建本地服务器测试HTML页面。首先下载安装MAMP并启动Apache服务，将项目文件放入htdocs目录或自定义文档根路径；接着在浏览器中访问http://localhost:8888查看页面效果，如端口冲突可改为80或其他端口；最后可通过创建快捷方式实现一键启动，提升开发效率。

2025-11-13 23:01:03

232

html转css工具_html转css网页版转换入口 html转css网页版转换入口是https://www.cssportal.com/html-to-css/，该工具支持一键将HTML转换为CSS，界面简洁，操作便捷，具备智能分析、实时预览、自定义命名和错误提示功能，适用于响应式设计与教学场景。

2025-11-13 22:58:02

425