首页新闻找找看学习计划

不定宽高的div怎么水平垂直居中,请各位大神帮忙解决啊。

0
[待解决问题]

最近决定转前端,同学出了一个问题让我回答,瞬间懵逼~

未知宽高的div怎么垂直水平居中啊?

css
小星星哟的主页 小星星哟 | 菜鸟二级 | 园豆:202
提问于:2016-08-10 17:11
< >
分享
所有回答(7)
0

水平居中就是maring auto

吴瑞祥 | 园豆:28731 (高人七级) | 2016-08-10 17:12

垂直水平居中该怎么设置呢!

支持(0) 反对(0) 小星星哟 | 园豆:202 (菜鸟二级) | 2016-08-10 21:01
0

可以试试给这个div加上绝对定位:position: absolute;

然后上下左右都设置0:bottom: 0;left: 0;top: 0;right: 0;最后:margin: auto;

leywis | 园豆:10 (初学一级) | 2016-08-10 17:18
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就能上下左右居中了

 

世间无码 | 园豆:20 (初学一级) | 2016-08-10 17:21

因为这样浏览器会强制平分div的上下左右的距离

 

记住设置body和html的宽高为100%

支持(0) 反对(0) 世间无码 | 园豆:20 (初学一级) | 2016-08-10 17:24

//css是这样的
html,body{ height:100%; width:100%; position:absolute;}
div{ position:absolute; left:0; bottom:0; right:0; top:0; margin:auto;}

<div> 我要水平居中。</div>

然后结果显示在浏览器左上角,是不是哪里弄错了?

 

支持(0) 反对(0) 小星星哟 | 园豆:202 (菜鸟二级) | 2016-08-10 18:38

@前端小白兔: html里面是position:relative

支持(0) 反对(0) 世间无码 | 园豆:20 (初学一级) | 2016-08-10 19:04

@世间无码: 然而还是没用。

支持(0) 反对(0) 小星星哟 | 园豆:202 (菜鸟二级) | 2016-08-10 19:10

@前端小白兔: div得设置宽高;因为不设置的话,div宽度默认是占据一行的;高度是自适应的;所以才没反应

支持(0) 反对(0) 世间无码 | 园豆:20 (初学一级) | 2016-08-10 19:10

@前端小白兔: 就相当于div的宽高占据了整个浏览器的可视区域;所以字才在左上角,

支持(0) 反对(0) 世间无码 | 园豆:20 (初学一级) | 2016-08-10 19:12

@世间无码: 可是我们要的就是不定宽高的div水平垂直居中啊!!

支持(0) 反对(0) 小星星哟 | 园豆:202 (菜鸟二级) | 2016-08-10 19:29

你这要的是垂直居中;不设置宽高的话,宽度默认是百分百,只要把内容填满就剧中了

支持(0) 反对(0) 世间无码 | 园豆:20 (初学一级) | 2016-08-10 19:45

@世间无码: 原谅我还是不懂~

支持(0) 反对(0) 小星星哟 | 园豆:202 (菜鸟二级) | 2016-08-10 21:00

@前端小白兔: 就是浏览器的可视区域都是这个div的区域

支持(0) 反对(0) 世间无码 | 园豆:20 (初学一级) | 2016-08-10 23:31
1

居中是分两步的,一个是水平居中,一个是垂直居中,只需要在父级标签加两条语句差不多就可以,

水平居中:text-align:center;

垂直居中:vertical-align:middle;

试试看

爱吃de馒头 | 园豆:255 (菜鸟二级) | 2016-08-10 21:26
0

因为可能父容器不是固定的宽高,还是用js获取父容器的宽高和自身的宽高计算定位的好。

筱申 | 园豆:223 (菜鸟二级) | 2016-08-11 11:58
0

把这个需要居中的 div 设置为 inline-block

display: inline-block;

然后外面再包一个 div 加上下面的

display: table-cell;
height: 200px;
text-align: center;
vertical-align: middle;
width: 200px;

 

 

by.Genesis | 园豆:1519 (小虾三级) | 2016-08-11 12:02
0

父盒子设置:display:table-cell;text-align:centervertical-align:middle

Div设置:display:inline-blockvertical-align:middle

远征军 | 园豆:202 (菜鸟二级) | 2017-12-09 08:46
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册