主流的CSS水平和垂直居中技术大全

KoreyLee 发布于2019-08-29 16:26 / 529人阅读

摘要：水平居中行内元素的水平居中在父元素中设置只对内联元素或行内块元素有效需要放置于父元素中块级元素的水平居中只对块级元素有效指的是自适应宽度。参考张鑫旭实现绝对定位元素的居中及原理居中方式水平居中垂直居中块级元素设置内联元素设置。

原文地址：https://www.xksblog.top/CSS-mainstream-centering-techniques.html

几个月也零零散散学了不少CSS居中技术，每到用的时候，发现总是稀里糊涂的，有时不知道该选用哪种技术，有时候又常常把方法搞混，索性好好整理一下，以后查阅回顾也更方便。这里只简单总结了大部分主流的居中方法，如果有发现更加牛皮好用的，会不断的更新进来。

水平居中 行内元素的水平居中

text-align:center（在父元素中设置）

只对内联元素或行内块元素有效

需要放置于父元素中

块级元素的水平居中

margin: 0 auto;

只对块级元素有效

auto指的是自适应宽度。实质就是均分了元素左右的剩余空间，所以元素会居中。

auto只有在块级元素设置了宽度width才有效(块级元素不设宽度默认就占整行了，所以是废话)

auto无法实现块级元素的垂直居中，原因与CSS默认的高度计算规则有关，这里暂不深究。但margin:auto可以实现绝对定位元素的水平垂直居中，见下文。

参考：为什么margin为auto不能垂直居中？、为什么「margin:auto」可以让块级元素水平居中？、张鑫旭——margin:auto实现绝对定位元素的居中及原理

垂直居中 行内元素的垂直居中

line-height: 父元素的高度;（在父元素中设置）

只对内联元素或行内块元素有效

需要知道父元素的高度

需要放置于父元素中

适用于垂直方向上只有一个需要居中的元素的情况（想同时垂直居中多个元素时，可以用padding）

vertical-align: middle;（用于垂直对齐inline元素）

只对内联元素或行内块元素有效

主要用在文本和与文本相邻元素的垂直方向上的对齐问题（主要是对齐的作用，而不是居中的作用），

例如将一个icon与文字对齐。

使用vertical-align需要了解文字的baseline和line-box等知识，可参考：[[翻译]关于Vertical-Align你需要知道的事情](https://segmentfault.com/a/11...、我对CSS vertical-align的一些理解与认识（一）

水平垂直居中 浮动元素

使用position:relative;

具体方法与绝对定位的第1个和第2个方法类似，只不过把absolute改为relative，并根据原float的方向稍作修改即可。

相对定位relative可以和float叠加，在float后的位置上再相对定位。

缺点就是float元素居中后仍会占据原来的位置。

第二种方式中，如果设定了浮动元素的高度，将会影响transform的具体值。

绝对定位元素

使用50%推进法则

position: absolute;
left: 50%;
top: 50%;
margin-left: -该元素自身宽度的一半px;      /*水平居中*/
margin-top: -该元素自身高度的一半px;      /*垂直居中*/

只对绝对定位的元素有效

需要知道绝对定位元素的宽高

兼容性很好，是一种主流用法

第一种方法的改进版，使用transform代替margin

position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);  /*水平垂直居中*/

不需要知道绝对定位元素的宽高。（如果设置了高度，则有可能影响到transform的具体值）

兼容性一般，IE10+以及其他现代浏览器支持

使用margin:auto;

position: absolute;
left: 0;
right: 0;           /*水平居中*/
top: 0;
bottom: 0;          /*垂直居中*/
margin: auto;

只对绝对定位的元素有效

不必知道宽高，但需要是图片这种自身包含尺寸的元素

left与right必须配对出现，top与bottom必须配对出现

目前支持IE9+，及其他浏览器。

参考：张鑫旭——margin:auto实现绝对定位元素的居中及原理

flex居中方式

display: flex;
justify-content: center;  /*水平居中*/
align-items: center;      /*垂直居中*/

块级元素设置display: flex;,内联元素设置display: inline-flex;。

需要注意的几个问题

元素浮动后仍可以设置margin属性，但auto不会起作用。

图片居中的问题

注意：如果图片的宽度大于父元素的宽度, 不能使用margin: 0 auto;或者text-align: center;让图片居中

如果图片的宽度大于父元素的宽度, 可以绝对定位中的居中方式让图片居中。但是定位流的弊端也比较明显。它必须知道图片宽度。

如果图片的宽度大于父元素的宽度, 也可以使用margin: 0 -100%;

（注意: 父元素必须设置text-align: center;）

超融合服务器服务器托管水平垂直居中 html的水平居中垂直居中实现垂直居中

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/113746.html

常用的CSS水平垂直居中方法大全

摘要：作为一名程序媛在编写页面的时候经常还会遇到水平或者垂直居中的一些布局今天正好有空就把各种居中的方式都总结了一下分享给大家希望能给大家带来帮助已知宽高背景图与背景图上的文字都水平垂直居中有宽度的水平居中有绝对定位的水平居中作为一名程序媛在编写页面的时候经常还会遇到水平或者垂直居中的一些布局今天正好有空就把各种居中的方式都总结了一下分享给大家希望能给大家带来帮助 1.已知宽高背景图与背景...

bergwhite 2019-08-29 12:38 评论0 收藏0
常用的CSS水平垂直居中方法大全

摘要：作为一名程序媛在编写页面的时候经常还会遇到水平或者垂直居中的一些布局今天正好有空就把各种居中的方式都总结了一下分享给大家希望能给大家带来帮助已知宽高背景图与背景图上的文字都水平垂直居中有宽度的水平居中有绝对定位的水平居中作为一名程序媛在编写页面的时候经常还会遇到水平或者垂直居中的一些布局今天正好有空就把各种居中的方式都总结了一下分享给大家希望能给大家带来帮助 1.已知宽高背景图与背景...

张利勇 2019-08-05 11:18 评论0 收藏0
常用的CSS水平垂直居中方法大全

摘要：作为一名程序媛在编写页面的时候经常还会遇到水平或者垂直居中的一些布局今天正好有空就把各种居中的方式都总结了一下分享给大家希望能给大家带来帮助已知宽高背景图与背景图上的文字都水平垂直居中有宽度的水平居中有绝对定位的水平居中作为一名程序媛在编写页面的时候经常还会遇到水平或者垂直居中的一些布局今天正好有空就把各种居中的方式都总结了一下分享给大家希望能给大家带来帮助 1.已知宽高背景图与背景...

muzhuyu 2019-08-01 16:53 评论0 收藏0
CSS居中总结大全

摘要：中居中的几种方式水平居中块级元素在块级元素中居中设置在子元素上，前提是不受影响只对行级元素有用行级元素设置浮动，或者设置定位之后。 CSS中居中的几种方式 1.水平居中margin：0 auto；块级元素在块级元素中居中设置在子元素上，前提是不受float影响 2.text-align只对行级元素有用,行级元素设置浮动，或者设置定位之后。给它的父元素设置text-aglin：cente...

Cruise_Chan 2019-08-30 15:55 评论0 收藏0
前端面试大全

摘要：一般情况下是全局对象。避免在页面的主体布局中使用，要等其中的内容完全下载之后才会显示出来，显示布局慢。对普通的网站有一个统一的思路，就是尽量向前端优化减少数据库操作减少磁盘。 HTML面试题 1.XHTML和HTML有什么区别 HTML是一种基本的WEB网页设计语言，XHTML是一个基于XML的置标语言最主要的不同： XHTML 元素必须被正确地嵌套。 XHTML 元素必须被关闭。...

dingda 2019-08-29 11:01 评论0 收藏0