元素垂直水平居中

2018-06-24 01:54:13来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

本文地址: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以后再写个专题

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:html便民查询各个工具类实例代码分享(支持pc和移动端)

下一篇:图片下方空白