考试类精品--水平垂直居中，这是一道面试必考题，^

共13个文件

html：10个

yml：1个

md：1个

需积分: 5 67 浏览量 2024-02-06 10:11:00 上传评论收藏 6KB ZIP 举报

在网页设计和前端开发中，水平垂直居中是一种常见的布局需求，也是面试中经常会遇到的问题。这个"考试类精品--水平垂直居中，这是一道面试必考题，^_^"的主题显然聚焦在这个核心技能上。下面将详细介绍如何实现元素的水平垂直居中，并提供相关的代码示例。一、CSS 居中方法 1. **Flexbox布局**：Flexbox是现代浏览器广泛支持的布局模式，可以轻松实现子元素的水平垂直居中。 ```css .container { display: flex; justify-content: center; /* 水平居中 */ align-items: center; /* 垂直居中 */ height: 100vh; /* 全屏高度 */ } ``` 2. **Grid布局**：CSS Grid是另一种强大的二维布局系统，同样可以方便地实现居中。 ```css .container { display: grid; place-items: center; /* 水平垂直居中 */ height: 100vh; /* 全屏高度 */ } ``` 3. **传统CSS方法**： - **绝对定位法**：适用于知道元素大小的情况。 ```css .container { position: relative; } .child { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); /* 调整元素位置，使其居中 */ } ``` - **负margin法**：适用于块级元素，但不适用于行内元素。 ```css .child { margin: auto; width: 200px; /* 必须设定宽度 */ } ``` - **display: table-cell**：适用于固定宽高的元素。 ```css .container { display: table; width: 100%; height: 100%; } .child { display: table-cell; vertical-align: middle; text-align: center; } ``` 二、JavaScript 动态居中当需要动态更新元素大小或者位置时，JavaScript可以派上用场。以下是一个简单的例子，通过计算调整元素的位置来实现居中： ```javascript function centerElement(element) { const parent = element.parentNode; const parentRect = parent.getBoundingClientRect(); const elementRect = element.getBoundingClientRect(); element.style.top = (parentRect.height - elementRect.height) / 2 + 'px'; element.style.left = (parentRect.width - elementRect.width) / 2 + 'px'; } ``` 三、响应式设计与居中在响应式设计中，元素的居中策略可能需要根据不同的屏幕尺寸进行调整。例如，使用媒体查询(`@media`规则)来改变不同设备上的居中方式。总结，水平垂直居中是前端开发者必须掌握的基本技能之一。通过理解并灵活运用Flexbox、Grid、传统CSS方法以及JavaScript，我们可以应对各种场景下的居中需求。对于面试来说，深入理解这些方法并能灵活应用，无疑会增加你的竞争力。

资源推荐

资源详情

资源评论

收起资源包目录

考试类精品--水平垂直居中，这是一道面试必考题，^_^.zip （13个子文件）

ahao4

absolute3.html 683B

absolute4.html 702B

.github

FUNDING.yml 747B

grid.html 624B

lineheight.html 775B

common.css 197B

flex.html 628B

css-table.html 672B

table.html 735B

writing-mode.html 914B

absolute1.html 729B

absolute2.html 731B

README.md 2KB

# 水平垂直居中 ## 仅居中元素定宽高适用： - [absolute + 负margin](http://yanhaijing.com/vertical-center/absolute1.html) - [absolute + margin auto](http://yanhaijing.com/vertical-center/absolute2.html) - [absolute + calc](http://yanhaijing.com/vertical-center/absolute3.html) ## 居中元素不定宽高适用： - [absolute + transform](http://yanhaijing.com/vertical-center/absolute4.html) - [writing-mode](http://yanhaijing.com/vertical-center/writing-mode.html) - [lineheight](http://yanhaijing.com/vertical-center/lineheight.html) - [table](http://yanhaijing.com/vertical-center/table.html) - [css-table](http://yanhaijing.com/vertical-center/css-table.html) - [flex](http://yanhaijing.com/vertical-center/flex.html) - [grid](http://yanhaijing.com/vertical-center/grid.html) ## 总结下面对比下各个方式的优缺点，肯定又双叒叕该有同学说回字的写法了，简单总结下 - PC端有兼容性要求，宽高固定，推荐absolute + 负margin - PC端有兼容要求，宽高不固定，推荐css-table - PC端无兼容性要求，推荐flex - 移动端推荐使用flex **小贴士：**关于flex的兼容性决方案，请看这里《[移动端flex布局实战](//yanhaijing.com/css/2016/08/21/flex-practice-on-mobile/)》 | 方法 | 居中元素定宽高固定 | PC兼容性 | 移动端兼容性 | | ---------------------- | --------- | ---------------------------- | --------------- | | absolute + 负margin | 是 | ie6+, chrome4+, firefox2+ | 安卓2.3+, iOS6+ | | absolute + margin auto | 是 | ie6+, chrome4+, firefox2+ | 安卓2.3+, iOS6+ | | absolute + calc | 是 | ie9+, chrome19+, firefox4+ | 安卓4.4+, iOS6+ | | absolute + transform | 否 | ie9+, chrome4+, firefox3.5+ | 安卓3+, iOS6+ | | writing-mode | 否 | ie6+, chrome4+, firefox3.5+ | 安卓2.3+, iOS5.1+ | | lineheight | 否 | ie6+, chrome4+, firefox2+ | 安卓2.3+, iOS6+ | | table | 否 | ie6+, chrome4+, firefox2+ | 安卓2.3+, iOS6+ | | css-table | 否 | ie8+, chrome4+, firefox2+ | 安卓2.3+, iOS6+ | | flex | 否 | ie10+, chrome4+, firefox2+ | 安卓2.3+, iOS6+ | | grid | 否 | ie10+, chrome57+, firefox52+ | 安卓6+, iOS10.3+ | ## 相关博文 http://yanhaijing.com/css/2018/01/17/horizontal-vertical-center/

评论收藏

内容反馈