CSS实现盒子模型水平居中、垂直居中、水平垂直居中的多种方法 |
您所在的位置：网站首页 › dw怎么把字居中 › CSS实现盒子模型水平居中、垂直居中、水平垂直居中的多种方法 |
CSS实现盒子模型水平居中、垂直居中、水平垂直居中的多种方法
|
CSS实现盒子模型水平居中、垂直居中、水平垂直居中的多种方法
CSS实现盒子模型水平居中的方法
水平居中效果图  水平居中
全局样式
.parent {
color: #FFFFFF;
height: 200px;
width: 200px;
margin: 0 auto;
background-color: #000000;
}
.child {
width: 50px;
height: 50px;
background-color: #26f12d;
}
第一种：margin+width
这种方法适用于已经知道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实现盒子模型垂直居中的方法 垂直居中效果图  垂直居中
第一种：position
这种方法适用于已经知道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实现盒子模型水平垂直居中方法水平垂直居中效果图  水平垂直居中
第一种：
.parent {
position: relative;
}
.child {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
第二种：
.parent {
position: relative;
}
.child {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
第三种：
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
margin-top: -25px; /* 自身 height 的一半 */
margin-left: -25px; /* 自身 width 的一半 */
}
|
【本文地址】
今日新闻 |
推荐新闻 |