关于margin:0 auto实现水平居中效果及常见的几种居中方法

在css中实现居中的方法有很多种，今天我们就先来看看最基础的margin:0 auto（等价于margin:suto）来实现水平居中吧！

怎么说呢，由于后面会学到很多的居中方法，而多数人的个人习惯也是常常去用那么一种，而我呢恰巧就是那种人，在前面有人问我通过margin属性来实现居中的时候，我虽然知道这个属性可以去实现，但却是真的，不会用啊！所以我通过上网查询，特意总结了一下margin:0 auto实现居中的条件和大家分享一下！

margin:0 auto是只有给设置了宽度的块级元素它自身设置才能生效（注意：无论是margin：0 auto还是margin：auto都只能设置水平方向居中，要想也实现垂直方向居中需要用到定位，详情大家可以参考下面讲原理的那篇文章）

三个关键点：1、块级元素

                      2、给定了宽度

                      3、给要居中的元素设置

对于其他的行内元素，行内块元素呢也是可以利用这个属性实现居中的

 行内元素：①设置display:block；

             ②给定要居中的行内元素的宽度。（行内元素设置成块级元素后可以对其宽高进行设置） 

行内块元素：设置display:block。（如input、button、img等元素，自带宽度可以不用设置其宽度）

注意：1、通过这种方式实现的水平居中方式是响应式的，就是不管在何种尺寸下它都能自适应实现居中效果

       2、可以通过对块级元素设置 text-align：center；的方式来实现内联元素（如文本、图片）居中

      3、margin:0 auto;可以使盒子居中，text-align:center;可以使此盒子内的内联元素居中，故有时需要两者结合使用才能使得盒子及其中文本一起居中。

好，现在讲完了margin：0 auto实现居中，肯定会有人想问，为什么这么设置就能实现水平居中了呢，这个问题呢，感兴趣的小伙伴可以参考下面这篇文章

margin 实现水平居中，垂直居中原理_margin 剧中-优快云博客https://blog.youkuaiyun.com/linshizhan/article/details/71521140

学完了margin：0 auto实现水平居中，那么简单回顾一下，我们常用的 盒子居中方法有那些（这里总结的只有博主知道的居中方式，并不代表所有哦）

（1）margin：0 auto；我们上面讲到的方法，这也是新手用的最简单的方法，也有很多老司机在用，这也就说明这种方法的经典性；

（2）使用position和transform，这也是我最常用的方法

​
position: absolute;

left: 50%;

transform: translateX(-50%);

​

注意：上面的属性需要全部设置给你要居中的元素，同时给他的父元素设置

position:relative才能实现；

该方法也可以实现水平方向的居中，只需要在上面的基础上加上top：50%;

transfrom：translateY（-50%）

具体实现代码：

  position: absolute;

  top:50%;

  left: 50%;

  transform: translateX(-50%);
  
  transform: translateY(-50%);
  
  // 最后两行可换成 transform: translate(-50%，-50%);

（3）flex布局

在flex布局中，通过设置侧轴上子元素排列方式为center，可以实现将元素垂直居中，适用于所有类型的元素。

display: flex;

flex-direction: row;   /*设置主轴方向是水平方向*/

align-items: center;  /*设置侧轴上，子元素的排列方式为居中对齐*/

注意：以上属性需要给父元素设置