CSS水平、垂直居中

水平居中

1.行内元素
父元素使用使用text-align: center;
2.宽度一定
使用margin:0 auto;
3.宽度不一定

• 将子元素改为行内元素display: inline; 在给父元素使用text-align: center;
• 使用flex布局（利用了flex中的项目在主轴居中）

		.parent{
			        display: flex;
			        justify-content: center;
			        height: 100px;
			        background: red;
		        }
		 .child{
				     margin: 0 auto;
				     background: blue;
		 }
		<div class="parent">
		    <div class="child">这是child的div</div>
		</div>

效果图：

• 使用grid布局.
  下面方法是给父元素设置justify-items: center或者justify-content: center;
  还有办法是给子元素设置justify-self: center;

       .parent{
           display: grid;
           border: red 1px solid;
           width: 280px;
           height: 200px;
           justify-items: center;
       }
       .child{
           background-color: #afd9ee;
           font-size: 40px;
       }

• 使用表格布局（块元素定位方式，table的宽度默认为子元素撑开的宽度）

   	  .parent{
   	     height: 100px;
   	     background: red;
   	  }
   	 .child{
   	     display: table;
   	     margin: 0 auto;
   	     background: blue;
   	 }

效果图：

• 使用定位布局

		.parent{
		            position: relative;
		            height: 100px;
		            background: red;
		 }
		.child{
				    position: absolute;
				    left: 50%;
				    /*或者使用margin-left: -宽/2*/
				    transform: translateX(-50%);
				    background: blue;
	    }

效果：

垂直居中

1. 行内元素：
line-height:高度

2. 块级元素高度一定：

• 定位实现

 	   .parent{
             position: relative;
             background: #008a00;
             height: 200px;
       }
       .child{
           	position: absolute;
           	top: 50%;
           	height: 100px;
           	margin-top: -50px; /*高的一半*/
            background: yellow;
       }

• 绝对定位+margin: 0

	.parent{
           position: relative;
           background-color: purple;
           width: 150px;
           height: 150px;
       }
       .child{
           position: absolute;
           margin: auto;
           top: 0;
           bottom: 0;
           width: 50px;
           height: 50px;
           background-color: #f0ad4e;
       }

3. 高度不确定：

• 定位实现

        .parent{
            position: relative;
            background: #008a00;
            height: 200px;
        }
        .child{
        	position: absolute;
        	top: 50%;
        	transform: translateY(-50%);
            background: yellow;
        }

效果：

• flex布局

        .parent{
            display: flex;
            background: #008a00;
            height: 200px;
            align-items: center;
        }
        .child{
            background: yellow;
        }

效果：

• 使用grid布局.
  下面方法是给父元素设置align-items: center或者align-content: center;
  还有办法是给子元素设置align-self: center;

       .parent{
           display: grid;
           border: red 1px solid;
           width: 280px;
           height: 200px;
           align-items: center;
       }
       .child{
           background-color: #afd9ee;
           font-size: 40px;
       }

• table布局
  表格布局vertical-align: middle;

        .parent{
            display: table;
            background: #008a00;
            height: 200px;
        }
        .child{
            display: table-cell;
            vertical-align: middle;
            background: yellow;
        }

效果：

水平垂直居中

1.position元素已知宽度
父元素：position: relative;
子元素：position: absolute;
将margin的margin-top设置为-高度的一半
margin-left设置为-宽度的一半

.box {
        height: 500px;
        width: 500px;
        position: relative;
 }
.content{
         width: 100px;
         height: 100px;
         position: absolute;
      	 top: 50%;
     	 left: 50%;
         margin: -50px 0 0 -50px;
      }

2.position transform 元素未知宽度
将方法1的margin改为transform: translate(-50%,-50%);
3.flex布局

  .a {
   width: 600px;
   height: 600px;
   background-color: blue;
   display: flex; //flex布局
   justify-content: center; //使子元素水平居中
   align-items: center; //使子元素垂直居中
 }
 .b {
   background-color: red;
   width: 200px;
   height: 100px;
 }

3.grid布局
下面方法是给父元素设置 justify-content: center;align-content: center;或justify-items:center;align-items:center;
还有方法可以给子元素设置 align-self: center;justify-self: center;

   .parent{
         display: grid;
         border: red 1px solid;
         width: 280px;
         height: 200px;
         justify-content: center;
         align-content: center;
     }
     .child{
         background-color: #afd9ee;
         font-size: 40px;
     }

4.table-cell布局
给元素最外层增加一个div

<div class="box">
<div class="content">
  <div class="inner">
  </div>
</div>
</div>
.box {
      width: 300px;
      height: 300px;
      display: table; //表格布局
    }
.content {
      background-color: rgba(112,223,223, 0.5);
      display: table-cell;
      vertical-align: middle; //使元素垂直局中
      text-align: center; //使元素水平居中
    }
.inner {
      background-color: #000;
      display: inline-block;
      width: 20%;
      height: 20%;
    }