摘要：块及元素水平方向居中原理两侧，则平分剩余空间，相当于水平居中。代码如下块及元素水平居右原理一侧，一侧没设置，则设置的一侧分配所有剩余空。想让居右显示，已经很简单了。再设置垂直方向上下为，即可实现垂直居中。
首先了解下，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; 是关键，没有设置此项，也不会水平垂直居中哦。
解释下原理:
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，即可实现垂直居中。（注意高度得设置）。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/114697.html
摘要：水平居中行内元素的水平居中在父元素中设置只对内联元素或行内块元素有效需要放置于父元素中块级元素的水平居中只对块级元素有效指的是自适应宽度。参考张鑫旭实现绝对定位元素的居中及原理居中方式水平居中垂直居中块级元素设置内联元素设置。 原文地址：https://www.xksblog.top/CSS-mainstream-centering-techniques.html 几个月也零零散散学...
摘要：适用情景单对象水平居中原理将子元素设置块级表格，再设置水平居中。结语有些是水平居中，有些是垂直居中，将它们某两个合在一起就能实现水平和垂直均居中。 前言 css水平和垂直居中是一个亘古不变的话题，它常常出现在优美的网页上以及各大前端面试当中。说来惭愧，在两年前面试的时候，我完全不知道如何做到水平和垂直均居中的方法，那场面别提有多尴尬了（ps：特想找个地洞钻进去）。。。时隔两年，对于这个...
阅读 2853·2021-11-22 11:56
阅读 3556·2021-11-15 11:39
阅读 901·2021-09-24 09:48
阅读 762·2021-08-17 10:14
阅读 1325·2019-08-30 15:55
阅读 2756·2019-08-30 15:55
阅读 1313·2019-08-30 15:44
阅读 2779·2019-08-30 10:59
