html5那个是⽔平居中,CSS⽔平居中的三种⽅法
css中经常会⽤到元素居中，那么今天我为⼤家分享⼏种⽔平居中的⽅法，下⾯代码都可以达到同样的居中效果，来不及解释了，快上马(码)：
⼀、margin : 0 auto;
title
div {
width: 100px;
height: 100px;
background: pink;
}
p {
width: 50px;
height: 50px;
background: red;
margin: 0 auto;
}
此种⽅法适⽤于块级标签在⽗级块标签内使⽤；
注意事项：⽗级标签必须是块级标签。如果⽗级不设宽度，body 内⼀级元素默认为浏览器宽度。
⼆、position+margin ;
title
div,
p {
margin: 0;
padding: 0;
}
div {
width: 100px;
div中的div居中height: 100px;
background: pink;
position: relative;
}
p {
width: 50px;
height: 50px;
background: red;
position: absolute;
top: 0;
left: 25px;
}
此种⽅法运⽤相对定位实现：定位脱离⽂档流，不占⽤宽⾼；
注意事项：⽗级元素必须要给相对属性： position: relative; 。
三、position+margin (百分⽐);
title
div,
p {
margin: 0;
padding: 0;
}
div {
width: 100px;
height: 100px;
background: pink;
position: relative;
}
p {
width: 50px;
height: 50px;
background: red;
position: absolute;
top: 0;
left: 50%;
margin-left: -25px;
}
此种⽅法主要适⽤于浏览器通栏定位；
注意事项：position 定位 left：50%，需要向左移动宽度⼀半的距离。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。