元素垂直水平居中
本文地址:http://www.cnblogs.com/veinyin/p/7606390.html
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不支持,一口老血。。。
2 元素宽高不确定
2.1 同1.2.2
2.2 flex以后再写个专题
本文地址:https://www.cnblogs.com/veinyin/p/7606390.html
感谢您的阅读及指正,让我们一起进步。
欢迎联系我交流:veinyin@gmail.com
作者:yuhui_yin
博客地址:https://www.cnblogs.com/veinyin/
如转载请注明出处。
感谢您的阅读及指正,让我们一起进步。
欢迎联系我交流:veinyin@gmail.com
作者:yuhui_yin
博客地址:https://www.cnblogs.com/veinyin/
如转载请注明出处。