不定宽高的div怎么水平垂直居中，请各位大神帮忙解决啊。
0
所有回答(7)
0
水平居中就是maring auto
垂直水平居中该怎么设置呢！
0
可以试试给这个div加上绝对定位:position: absolute;
然后上下左右都设置0：bottom: 0;left: 0;top: 0;right: 0；最后：margin: auto;
0
//css样式是这么写的
html,body{ width:100%; height:100%; position:absolute; }
div{ position:absolute; top:0; left:0; bottom:0; right:0; margin:auto; }
//这样，，只要你的div没有大出浏览器可视区域，你的div就能上下左右居中了
因为这样浏览器会强制平分div的上下左右的距离
记住设置body和html的宽高为100%
//css是这样的
html,body{ height:100%; width:100%; position:absolute;}
div{ position:absolute; left:0; bottom:0; right:0; top:0; margin:auto;}
<div> 我要水平居中。</div>
然后结果显示在浏览器左上角，是不是哪里弄错了？
@前端小白兔: html里面是position：relative
@世间无码: 然而还是没用。
@前端小白兔: div得设置宽高；因为不设置的话，div宽度默认是占据一行的；高度是自适应的；所以才没反应
@前端小白兔: 就相当于div的宽高占据了整个浏览器的可视区域；所以字才在左上角，
@世间无码: 可是我们要的就是不定宽高的div水平垂直居中啊！！
你这要的是垂直居中；不设置宽高的话，宽度默认是百分百，只要把内容填满就剧中了
@世间无码: 原谅我还是不懂~
@前端小白兔: 就是浏览器的可视区域都是这个div的区域
1
居中是分两步的，一个是水平居中，一个是垂直居中，只需要在父级标签加两条语句差不多就可以，
水平居中：text-align：center；
垂直居中：vertical-align：middle；
试试看
0
因为可能父容器不是固定的宽高，还是用js获取父容器的宽高和自身的宽高计算定位的好。
0
把这个需要居中的 div 设置为 inline-block
display: inline-block;
然后外面再包一个 div 加上下面的
display: table-cell;
height: 200px;
text-align: center;
vertical-align: middle;
width: 200px;
0
父盒子设置：display：table-cell；text-align：center；vertical-align：middle；
Div设置：display：inline-block；vertical-align：middle；
