css垂直水平居中(父元素宽高有无情况）+ flex用法

垂直水平居中----6种方法

知道父元素具体宽高时：

父元素设置display:flex, 子元素设置 margin:auto.
父元素相对定位，子元素绝对定位 4个属性都设置0，再设置margin:auto.
父元素相对定位，子元素绝对定位，left:50%,top:50%,transform:translate(-50%,-50%)
flex布局，父元素 display:flex,justify-content:center,align-items:center
网格布局：父元素 display:grid,justify-content:center,align-items:center
父元素display:table-cell,vertical-align:middle(垂直居中)，子元素margin:auto（水平居中）

css 复制代码

/*第一种*/
       .parent{
            width: 600px;
            height: 600px;
            display: flex;
            border: 1px solid royalblue;
        }
        .child{
            width: 100px;
            height: 100px;
            background: red;
            margin: auto;
        }
/*第二种*/
       .parent{
            width: 600px;
            height: 600px;
            border: 1px solid green;
            position: relative;
        }
        .child{
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin:auto;
        }
/*第三种*/
        .parent{
            width: 600px;
            height: 600px;
            border: 1px solid green;
            position: relative;
        }
        .child{
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
            top: 50%;
            left: 50%;
           transform: translate(-50%,-50%);
        }
/*第四种*/
       .parent{
            width: 600px;
            height: 600px;
            border: 1px solid green;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .child{
            width: 100px;
            height: 100px;
            background: red;
        }

/*第五种*/
       .parent{
            width: 600px;
            height: 600px;
            border: 1px solid green;
            display: grid;
            justify-content: center;
            align-items: center;
        }
        .child{
            width: 100px;
            height: 100px;
            background: red;
        }

/*第六种*/
       .parent{
            width: 600px;
            height: 600px;
            border: 1px solid green;
            display: table-cell;
            vertical-align: middle;
        }
        .child{
            width: 100px;
            height: 100px;
            background: red;
            margin: auto;
        }

未知父元素宽高时：

可以设置html,body{display:flex,justify-content:center,align-items:center},宽高100%
可以设置html,body{width:100%,height:100%},子元素相对定位 position: relative;top: 50%;left:50%;transform: translate(-50%,-50%);
可以设置html,body宽高百分比，子元素相对定位position: relative;margin:0 auto;top:50%;transform:translateY(-50%)
可以设置html,body宽高百分百,body{display:flex}，子元素margin:auto

css 复制代码

 /*4*/
      html,body{
          width: 100%;
          height: 100%;
          padding: 0; 
		  margin: 0;
      }
      body{
            display: flex
        }
      .box{
            width: 400px;
            height: 400px;
            background-color: aquamarine;
            margin: auto; //居中
        }

注意点

为什么设置css-margin:auto 只能实现水平居中，不能实现垂直居中?

因为auto的作用是：自动填充剩余空间。

块级元素在水平方向上自动填充一整行，而在垂直方向上不会自动填充。所以块级元素在水平方向上，左右的margin会平分剩余空间，在垂直方向上，没有剩余空间可平分，即只呈现水平居中的效果。

flex用法

弹性布局

具有6个属性：

flex-direction | flex-wrap | flex-flow | justify-content | align-items | align-content

flex-direction :属性决定主轴的方向 flex-direction：row | row-reverse | column | column-reverse
row(默认):主轴为水平方向，起点在左端。
row-reverse:主轴为水平方向，起点在右侧。
column:主轴为垂直方向，起点在上沿。
column-reverse:主轴为垂直方向，起点在下沿。

flex-wrap : 默认项目都排在一条线上，如果一条线上排不下，如何换行，flex-wrap:nowrap | wrap | wrap-reverse 。
nowrap:不换行。
wrap：换行，第一行在上方。
wrap-reverse:换行，第一行在下方。
flex-flow ： 属性是 flex-direction和 flex-wrap 简写形式。默认值为 row nowrap
flex-flow: flex-direction flex-wrap

justify-content :属性定义了项目在主轴上的对齐方式 justify-content:flex-start | flex-end | center | space-between | space - around | space-evenly
flex-start:从头开始对齐。
flex-end:从尾开始对齐。
center :居中。
space-butween:两端对齐,项目之间间隔都相等。
space-around:只有内部项目彼此之间的间距相等，第一项和最后一项对边缘的距离将分配中间一半的间距。
space-evenly:项目分布使得任何两个项目之间的间距（以及边缘的空间）相等。

align-items :属性定义项目在交叉轴上如何对齐 align-items:flex-start | flex-end | center | baseline | stretch
flex-start:交叉轴的起点对齐。
flex-end：交叉轴上终点对齐。
center :交叉轴上中点对齐。
baseline :项目的第一行文字的基线对齐。
stretch(默认):如果项目未设置高度或设置auto，将占满整个容器的高度。