为了账号安全,请及时绑定邮箱和手机立即绑定

table-cell实现垂直居中还有一个比较大的缺点

table-cell实现垂直居中必须要给table-cell元素规定一个width,而且不能设置成100%,像老师这样刚好设置的1000px躲避了这个问题

正在回答

6 回答

这是表宽计算的问题,自己再加个parent-fix容器,设置该容器“display: table; width: 100%”

0 回复 有任何疑惑可以回复我~

##不要吵了,我直接上图吧


<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>水平垂直居中</title>

<style type="text/css">

#parent{

width: 100%;

height: 600px;

background-color: #CCCCCC;

text-align: center;

display: table-cell;

vertical-align: middle;

}

#child{

width: 200px;

height: 200px;

background-color: #C9394A;

display: inline-block;

}

</style>

</head>

<body>

<div id="parent">

<div id="child">

水平垂直居中

</div>

</div>

</body>

</html>


http://img1.sycdn.imooc.com//5dc7e96d0001eb4e04030855.jpg

0 回复 有任何疑惑可以回复我~

width:100%撑不开

0 回复 有任何疑惑可以回复我~

你是不是对垂直居中有什么误解??

0 回复 有任何疑惑可以回复我~
#1

Civo 提问者

写漏了,想写垂直水平居中的,我是针对老师居中布局这一小节视频写的
2019-11-03 回复 有任何疑惑可以回复我~

垂直居中,设高度就可以,和宽度没关系

0 回复 有任何疑惑可以回复我~

其实不需要,它会根据子元素的内容宽度而自动撑开

0 回复 有任何疑惑可以回复我~
#1

Civo 提问者

你这样不设置宽度,怎么显示垂直居中???子元素多大,整个元素就多大?这还叫垂直居中么?两边都没有间隙了
2019-11-03 回复 有任何疑惑可以回复我~
#2

慕田峪2157373

靠子元素撑开就不是所谓的水平居中了
2019-12-20 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消

table-cell实现垂直居中还有一个比较大的缺点

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信