css上下左右居中得几种方法

1.绝对定位居中

.box1{
  position:relative;border:1px solid #000000;
/* 自定义高度*/
width:500px; height:500px;
}
.box2{
  position:absolute;
    top:0;left:0;right:0;bottom:0;
    margin:auto;
    border:1px solid #00aef3;
    width:200px;height:200px;
}

效果图：

图一

注意：当没有指定内容块的具体的高度和宽度时，内容块会填满剩余空间。可以通过 display:table 来使高度由内容来决定，但是浏览器支持不是很好。

2.transform：translate（）；加一半减一半居中

.box{
				width: 500px;
				height: 500px;
				border: 1px solid red;
			}
			.box1{
				position: relative;
				width: 200px;
				height: 200px;
				left: 50%;
				top: 50%;
                -webkit-transform: translate(-50%,-50%);
                -ms-transform: translate(-50%,-50%);
				transform: translate(-50%,-50%);
				border: 1px solid #222222;
			}

这里translate的百分比是相对于自身的，所以高度是可变的，效果如图一。但是transform需要进行适配浏览器得支持。

3.跟上面相似，可以自己理解一下子

.box{
				width: 500px;
				height: 500px;
				border: 1px solid red;
			}
			.box1{
				position: relative;
				width: 200px;
				height: 200px;
				left: 50%;
				top: 50%;
				margin-top: -100px;
				margin-left: -100px;
				border: 1px solid #222222;
			}

注意：需要知道宽高

4.弹性盒子flex 居中

.box{
				display: flex;
				flex-direction: row;
				justify-content: center;
				align-items: center;
				width: 500px;
				height: 500px;
				border: 1px solid red;
			}
			.box1{
				width: 200px;
				height: 200px;
				border: 1px solid #222222;
			}

最方便最简单，代码最少得，需要浏览器得支持