本文地址:
1 已知宽高
1.1 定位值上下左右给0
1 /* 父盒子垂直水平居中 */ 2 .box{ 3 background-color: #cccccc; 4 height: 200px; 5 width: 400px; 6 position: absolute; 7 top: 0; 8 left: 0; 9 right:0;10 bottom: 0;11 margin: auto;12 }
- 只能用于给的宽高的盒子,十分方便,笔者常用
1.2 左上角居中再拉回来
1.2.1 需要计算偏移量
1 .box { 2 position: absolute; 3 left: 50%; 4 top: 50%; 5 background-color: #cccccc; 6 width: 400px; 7 height: 200px; 8 margin-left: -200px; 9 margin-top: -100px; /* 需根据宽高计算偏移量 */10 }
- 需要知道宽高还得计算,笔者基本不用,嫌麻烦。。。
1.2.2 不用计算偏移量
1 .box {2 position: absolute;3 left: 50%;4 top: 50%;5 background-color: #cccccc;6 width: 400px;7 height: 200px;8 transform: translate(-50%,-50%); /* 此处不用自己计算偏移量 */ 9 }
- IE不支持,一口老血。。。