CSS居中的几种办法
上下居中: .align-center{ position: fixed; top: 50%; left:50%; transform:translate(-50%,-50%); -ms-transform:translate(-50%,-50%); /* IE 9 */ -moz-transform:rtranslate(-50%,-50%); /* Firefox */ -webkit-transform:translate(-50%,-50%); /* Safari 和 Chrome */ -o-transform:translate(-50%,-50%); text-align: center; } 需要宽高的居中 .center{ height:50px; width:20px; position: fixed; margin:auto; top:0; bottom:0; left: 0; right: 0; } // 方法一:已知元素的高宽 #div1{ background-color:#6699FF; width:200px; height:200px; position: absolute; //父元素需要相对定位 top: 50%; left: 50%; margin-top:-100px ; //二分之一的height,width margin-left: -100px; } //方法二:未知元素的高宽 #div1{ width: 200px; height: 200px; background-color: #6699FF; margin:auto; position: absolute; //父元素需要相对定位 left: 0; top: 0; right: 0; bottom: 0; } 那么问题来了,如何垂直居中一个img?(用更简便的方法。) #container { display:table-cell; text-align:center; vertical-align:middle; } div+css 怎么让一个小div在另一个大div里面 垂直居中 方法1: .parent { width:800px; height:500px; border:2px solid #000; position:relative; } .child { width:200px; height:200px; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background-color: red; } 方法2: .parent { width:800px; height:500px; border:2px solid #000; display:table-cell; vertical-align:middle; text-align: center; } .child { width:200px; height:200px; display:inline-block; background-color: red; } 方法3: .parent { width:800px; height:500px; border:2px solid #000; display:flex; justify-content:center; align-items:center; } .child { width:200px; height:200px; background-color: red; } 方法4: .parent { width:800px; height:500px; border:2px solid #000; position:relative; } .child { width:300px; height:200px; margin:auto; position:absolute;/*设定水平和垂直偏移父元素的50%, 再根据实际长度将子元素上左挪回一半大小*/ left:50%; top:50%; margin-left: -150px; margin-top:-100px; background-color: red; }