html页⾯居中怎么设置，实现div标签在html页⾯中居中的⼏种
⽅式
在制作⽹页的时候，我们会需要给div标签各种⽅式的居中布局，以下分享了⼏种常见的⼏种居中⽅式，以及居中的⽅法。
1、实现垂直居中
当标签元素为⽂本或图⽚时我们可以直接在⽗元素css中设置text-align:center实现⽔平居中，或者使⽤display:inline-block将div标签内的⼦标签元素设置指定为⾏内元素，但如果⾏内元素设置了指定宽度text-align:center就没有作⽤这时候可以通过设置css中的margin属性实现居中.
.jz-a{
text-align: center;
height: 50px;
line-height: 50px;
}
这是⼀段⽂字
或者
.jz-b {
margin-left: auto;
margin-right: auto;
width: 300px;
}
这是⼀段⽂字
2、标签垂直居中
与⽔平居中的⽅式差不多，⾸先⼦元素是⼀个⾏内元素，⾼度由内容⾃定义，可以使⽤line-height设置垂直居中。
111111*********
.cz-line {
width: 100px;
height: 200px;
css设置文字垂直居中line-height: 200px;
border: 1px solid #118330;
}
.cz-line2 {
background:#0548E3;
}
或者
⼦标签元素是块级元素，但没有设置指定的⾼度，可以通过给⽗元素css属性设定display来解决.
2222222222
.zz-a {
width: 100px;
height: 200px;
border: 1px solid #304484;
display: table-cell;
vertical-align: middle;
}
.zz-b {
background:#27E4A1;
}
全屏垂直居中
#eee {
background:#0B858B;
border: 1px solid #118330;
width: 320px;
height: 320px;
position: absolute;
margin: -160px;
}
#ccc {
height: 0px;
width: 0px;
top: 50%;
left: 50%;
position: absolute;
}
www.qtool
以上就是常见的⼏种在⽹页布局中常⽤的居中⽅式.

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