CSS实现盒子模型水平居中、垂直居中、水平垂直居中的多种方法 |
您所在的位置:网站首页 › dw怎么让内容居中 › CSS实现盒子模型水平居中、垂直居中、水平垂直居中的多种方法 |
CSS实现盒子模型水平居中、垂直居中、水平垂直居中的多种方法
CSS实现盒子模型水平居中的方法
水平居中效果图 ![]() 这种方法适用于已经知道width的盒子,实现起来比较简单 .child { width: 50px; margin: 0 auto; } 第二种:text-align+inline-block这种方法适用于多种场景(width不固定) .parent { text-align: center; } .child { display: inline-block; } 第三种:float+position这种方法适用于多种场景(width不固定) .between { position: relative; left: 50%; float: left; } .child { position: relative; right: 50%; } 第四种:这种方法适用于多种场景(width不固定) .parent { position: relative; } .between { position: absolute; left: 50%; } .child { position: relative; right: 50%; }第五种:flex 这种方法适用于多种场景(width不固定) .parent { display: -webkit-box; -webkit-box-pack: center; -webkit-box-orient: horizontal; }第六种:fit-content 这种方法适用于多种场景(width不固定) .between { width: -webkit-fit-content; margin: 0 auto; }CSS实现盒子模型垂直居中的方法 垂直居中效果图 ![]() 这种方法适用于已经知道width的盒子 .parent { position: relative; width: 200px; height: 200px; } .child { position: absolute; margin: 75px 0; }第二种:position+transform 这种方法适用于已经知道width的盒子 .parent { position: relative; width: 200px; height: 200px; } .child { position: absolute; top: 50%; transform: translate(0%, -50%); } 第三种:flex布局这种方法适用于多种场景(width不固定) .parent { display: flex; align-items: center; } 第四种:table-cell布局这种方法适用于多种场景(width不固定) .parent { display: table; } .between { display: table-cell; vertical-align: middle; } CSS实现盒子模型水平垂直居中方法水平垂直居中效果图 ![]()
|
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |