4-水平+垂直居中总结

水平垂直居中总结

• 水平居中：

  首先要搞清楚存在两个条件才能够称之为水平居中，即父元素必须是块级盒子容器，父元素宽度必须已经被设定好，

  ①子元素是块级元素且宽度没有设定：

  ​ 这种情况，子块级默认和父级一样的宽度，所以就相当于已经居中了；如果这个子元素有内容，想让这个内容居中，内容是块级 还是① ，内容是行内元素文本以及行内块元素 跳转到②；

  ②子元素是行内元素文本行内块元素，子元素宽度是由其内容撑开的

  ​ 这种情况下解决方案是给父元素设定text-align:center;

  ③子元素是块级元素且宽度已经设定（已经设定还是没有设定高度都可以用flex）

  ​ 这种情形存在多种解法，下面一一来列举

  -------------给子元素添加margin:0 auto; 行内块设置这个没用，但是可以设置各margin值

  注： 加了浮动和定位（不包括relative） ，margin：x auto 就失效了

  ​ 是因为变成行内块了；

  -------------设置子盒子定位;

              position: absolute;
              left:50%;
              margin-left:-子盒子宽度的一半px;
              或者：
              transform： translateX（-50%）；
  

  ------------设置flex：

   			display:flex;
              flex-direction: row;
              justify-content:center;
  

• 垂直居中：

  要讲垂直居中，首先设定两个条件即父元素是盒子容器且高度已经设定

  ①子元素是行内元素，高度是由其内容撑开的----针对单行文本：

  ​ 这种情况下，需要通过设定父元素的line-height为其高度来使得子元素垂直居中

  ②子元素是块级元素但是子元素高度没有设定，高度是不继承的

  -----------通过给父元素设定display:table-cell; vertical-align:middle来解决

  -----------通过设置父元素flex：

  			display: flex;
              flex-direction: column;
              justify-content: center;
  

  ③子元素是块级元素且高度已经设定：

  ------------利用绝对定位，让子元素相对于父元素绝对定位

    		position: absolute;
            top:50%;
            margin-left:-子盒子高度的一半px;
            或者：
            transform： translateY（-50%）；
  

  ---------------------通过设置父元素flex：

  			display: flex;
              flex-direction: column;
              justify-content: center;
  

• 水平居中+垂直居中：

  ①单行行内元素：

  ​ 父元素设置：text-align:center，display：table-cell;vertical-align:middle,在这里，图片，文字，都是一样的操作

​ ②单个块级元素，父元素设置为相对定位，子元素设置为绝对定位高度，宽度为50%

​ ③flex实现不定宽度水平+垂直居中设置父盒子

				display: flex;
           		justify-content:center;
           		align-items:center;