margin 实现水平居中，垂直居中原理

首先了解下，margin的auto属性的作用是用来分配剩余空间，所以对于有剩余空间的元素才有效哦（块及元素）。比如图片设置margin: 0 auto是无效的，因为图片是内联元素，不是占一整行，没有剩余空间。

1.块及元素水平方向居中：

原理：两侧auto，则平分剩余空间，相当于水平居中。

div { margin-right: auto; margin-left: auto; width:200px; height: 200px } 当然也可以这样写 div { margin: 0 auto; width:200px; height: 200px } 跟垂直方向无关，垂直方向可随便设置，只要水平左右都设置为auto即可。注意width宽度一定要设置，没有宽度的块默认就是100%，就没有auto值了。

代码如下：

2.块及元素水平居右：

原理：一侧auto，一侧没设置，则设置auto的一侧分配所有剩余空。

想让div居右显示，已经很简单了。把margin-left 的值设置为auto 即可。代码如下：

div { width:200px; height: 200px; margin-left: auto;}

原理：一侧定值,一侧auto,auto为剩余空间大小。代码如下：

div { width:200px; height: 200px; margin-left: auto; margn-right: 100px; }

以上方法只能实现水平方向，对于垂直方向是无效的，因为垂直方向没有剩余空间，这点不再解释了。

3.想要实现垂直方向的居中可以用绝对定位。

div {
               background: #FF0000;
               width: 200px;
               height: 200px;
               position: absolute;
               top: 0;
               left: 0;
               right: 0;
               bottom: 0;
               margin: auto;
           }

margin: auto; 是关键，没有设置此项，也不会水平垂直居中哦。

margin-top: auto; margin-bottom: auto; 仅实现垂直方向居中

解释下原理:

1.在普通内容流中，margin:auto的效果等同于margin-top:0;margin-bottom:0。

2.position:absolute使绝对定位块跳出了内容流，内容流中的其余部分渲染时绝对定位部分不进行渲染。

3.为块区域设置top: 0; left: 0; bottom: 0; right: 0;将给浏览器重新分配一个边界框，此时该块块将填充其父元素的所有可用空间，所以margin 垂直方向上有了可分配的空间。

4.再设置margin 垂直方向上下为auto，即可实现垂直居中。（注意高度得设置）。

position:absolute 和 margin：auto合用实现元素水平垂直居中

0 auto与body{text-align:center;}实现元素居中

作者：shizhan1881
原文地址：https://blog.csdn.net/linshizhan/article/details/71521140

margin 实现水平居中，垂直居中原理相关推荐

html屏幕垂直居中显示,HTML+CSS，让div在屏幕中居中（水平居中+垂直居中）方法总结...
水平居中直接加上标签即可,或者设置margin:auto;当然也可以用下面的方法下面说两种在屏幕正中(水平居中+垂直居中)的方法放上示范的html代码: MAIN 方法一: div使用绝对布局, ...
html里面行高的原理,CSS行高（line-height）及文本垂直居中原理
在CS多现业讲进行效通近年有务这行定果过近年有S中,line-height 属性设置两段段文本之间的距离,也就是行高,如果我们把一段文本的line-height设置为父容器的高度就可以实现文本垂直居中 ...
让div在屏幕中居中（水平居中+垂直居中）的几种方法
这里是修真院前端小课堂,本篇分析的主题是 [让div在屏幕中居中(水平居中+垂直居中)的几种方法] 水平居中方法: 1.inline,inline-block元素的水平居中,在父级块级元素中设置tex ...
HTML 水平居中垂直居中垂直水平居中的几种实现方式
文章目录水平居中垂直居中垂直水平居中方式1:绝对定位方式二定位+负margin 方式3:使用translate实现平移方式4:通过设置bottom top left right marg ...
HTML+CSS，让div在屏幕中居中（水平居中+垂直居中）方法总结
最近写网页经常需要将div在屏幕中居中显示,遂记录下几个常用的方法,都比较简单. 水平居中直接加上<center>标签即可,或者设置margin:auto;当然也可以用下面的方法下面说两 ...
css行高（line-height）及文本垂直居中原理
css行高(line-height)及文本垂直居中原理一.行高的定义标准定义:两行文字基线之间的距离. 那么什么是基线? 基线是在英文字母中用到的一个概念,我们刚学英语的时使用的那个英语本子每行有 ...
CSS：div内容水平居中/垂直居中设置（非line-height和padding方法）
问题: 业务需求实现某段内容在指定大小的div内居中(水平居中+垂直居中)显示. 最初的实现方法通过设置line-height与外层相同div height相同实现,但内容过长时导致如下图异常状况. ...
margin:auto水平居中和垂直居中的原理分析
margin属性平时写css几乎天天写,再熟悉不过了!今天我们来深入讨论下margin的一些居中的问题(本来这篇文章早就想写的,一直忘记了),话不多说,直接进入正题! 1.margin:auto 有人 ...
块级元素 div水平居中垂直居中
水平居中 margin:0 auto; 解读上面的代码值设置了两个值,那么第一个值就是元素的上下边距,第二个值就是左右边距.当元素的定义了width属性时,auto能实现水平居中的效果.这是固定写法 ...

margin 实现水平居中，垂直居中原理

margin 实现水平居中，垂直居中原理相关推荐

最新文章

热门文章