最近老是面试,面别人和被人面,有很多常常考察的知识点,准备总结一下,写一个一问就蒙系列。
如何将一个子div 垂直居中,这是一个常被问到的题目。直接进入正题,其实有这么几种方案:
1、padding/margin
这是最土的方案,比如外部div包裹高度为固定的30px,内部div高度为固定的10px,那么居中方案很简单,只要给内部的div设置一个padding/margin就可以了。
代码如下:
.inner-div { padding(margin): (( 外层高度 - 内层高度 ) / 2) 0; }
2、绝对定位
使用绝对定位来进行垂直居中的设置,可能是最常用的了,基本原理是:将子元素相对于父元素移动50%,但由于绝对定位的坐标原点为左上角,所以要再将子元素向回修正该元素宽度的一半,这样则元素刚好居中:
代码如下(假设子元素宽度为200px):
.inner-div { position: absolate; top: 50%; margin-top: -100px; }
以上方法是传统方法,如果继续深究,当不知道子元素高度的情况怎么办呢?毕竟有很多时候,我们是没法直接知道元素的宽度的。
所以有了以下这种进阶方案,这个需要用到css3的一些属性,具体浏览器兼容请戳 这里;
具体方法如下:
.inner-div { position: absolate; top: 50%; /*利用css3的属性,进行移动,就不需要知道元素具体高度了*/ transform: translateY(-50%); }
3、终极解决方案
使用css3中提供的flexible box来解决问题,具体兼容性请戳 这里; 由于兼容性问题,代码需要增加前缀:
display: -webkit-box; -webkit-box-pack: center; -webkit-box-align: center; display: -moz-box; -moz-box-pack: center; -moz-box-align: center; display: -ms-flexbox; -ms-flex-pack: center; -ms-flex-align: center;
一般来说,如上代码增加到子元素上即时生效,如果出现问题,放到外层试试 :P
综上,这就是我了解到的几种常用的垂直居中的方式,如果有一些别的方式,希望不吝赐教,谢谢!

HTML is not only the skeleton of web pages, but is more widely used in many fields: 1. In web page development, HTML defines the page structure and combines CSS and JavaScript to achieve rich interfaces. 2. In mobile application development, HTML5 supports offline storage and geolocation functions. 3. In emails and newsletters, HTML improves the format and multimedia effects of emails. 4. In game development, HTML5's Canvas API is used to create 2D and 3D games.

TheroottaginanHTMLdocumentis.Itservesasthetop-levelelementthatencapsulatesallothercontent,ensuringproperdocumentstructureandbrowserparsing.

The article explains that HTML tags are syntax markers used to define elements, while elements are complete units including tags and content. They work together to structure webpages.Character count: 159

The article discusses the roles of <head> and <body> tags in HTML, their impact on user experience, and SEO implications. Proper structuring enhances website functionality and search engine optimization.

The article discusses the differences between HTML tags , , , and , focusing on their semantic vs. presentational uses and their impact on SEO and accessibility.

Article discusses specifying character encoding in HTML, focusing on UTF-8. Main issue: ensuring correct display of text, preventing garbled characters, and enhancing SEO and accessibility.

The article discusses various HTML formatting tags used for structuring and styling web content, emphasizing their effects on text appearance and the importance of semantic tags for accessibility and SEO.

The article discusses the differences between HTML's 'id' and 'class' attributes, focusing on their uniqueness, purpose, CSS syntax, and specificity. It explains how their use impacts webpage styling and functionality, and provides best practices for


Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

MantisBT
Mantis is an easy-to-deploy web-based defect tracking tool designed to aid in product defect tracking. It requires PHP, MySQL and a web server. Check out our demo and hosting services.

MinGW - Minimalist GNU for Windows
This project is in the process of being migrated to osdn.net/projects/mingw, you can continue to follow us there. MinGW: A native Windows port of the GNU Compiler Collection (GCC), freely distributable import libraries and header files for building native Windows applications; includes extensions to the MSVC runtime to support C99 functionality. All MinGW software can run on 64-bit Windows platforms.

SublimeText3 English version
Recommended: Win version, supports code prompts!

PhpStorm Mac version
The latest (2018.2.1) professional PHP integrated development tool

EditPlus Chinese cracked version
Small size, syntax highlighting, does not support code prompt function
