这篇文章主要讲解了“HTML中元素居中要注意哪些事项”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“HTML中元素居中要注意哪些事项”吧！
不使用定位
水平居中：text-align=center;（可继承）
竖直居中：margin:0auto;(块级元素)
其他居中：
1.文字居中：父元素设置高子元素设置高line-height=height(父元素)
2.图片居中：vertical-aign：middle;<--必须放在图片元素中
.first{
width:300px;
height:100px;
background-color:black;
color:white;
text-align:center;
margin:0auto;//针对块级元素
}
<divclass="first">
不使用定位（1）
</div>
.second{
width:300px;
height:100px;
background-color:green;
}
.s_child{
width:150px;
line-height:100px;
}
<divclass="second">
<divclass="s_child">
不使用定位（2）
</div>
</div>
2.定位居中
a.父元素高度固定
父元素：相对定位
子元素：绝对定位
top:50%（父元素高度的一半）
left:50%
margin-top:自己的高度一半；（加负号）
margin-left:自己宽度的一半；（加负号）
.dw_one{
width:600px;
height:300px;
position:absolute;
background:black;
}
.dw_one_child{
background:white;
position:relative;
width:50px;
height:50px;
top:50%;
left:50%;
margin-top:-25px;
margin-left:-25px;
}
<divclass="dw_one">
<divclass="dw_one_child">
a
</div>
</div>
b.父元素高度不固定
.wrapper{
width:600px;
height:600px;
}
.dw_two{
width:100%;
height:100%;
position:absolute;
background:black;
}
.dw_two_child{
background:white;
position:relative;
top:50%;
left:50%;
width:100px;
height:100px;
transform:translate(-50%,-50%);
-moz-transform:translate(-50%,-50%);
-ms-transform:translate(-50%,-50%);
-o-transform:translate(-50%,-50%);
-webkit-transform:translate(-50%,-50%);
}
<divclass="wrapper">
<divclass="dw_two">
<divclass="dw_two_child">
a
</div>
</div>
</div>
3.关于多行文本的居中
使用display:table;display:table-cell;
vertical-align:middle;居中
#outer{
width:200px;
height:200px;
background:#cccccc;
display:table;
_position:relative;//"_"为了兼容IE6
}
#inner{
display:table-cell;
vertical-align:middle;
_position:absolute;
_top:50%;
}
#content{
_position:relative;
_top:-50%;
}
<divid="outer">
<divid="inner">
<divid="content">
</div>
</div>
</div>
感谢各位的阅读，以上就是“HTML中元素居中要注意哪些事项”的内容了，经过本文的学习后，相信大家对HTML中元素居中要注意哪些事项这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是亿速云，小编将为大家推送更多相关知识点的文章，欢迎关注！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
