                        课程
                    
                        /前端开发
                        
                            /HTML/CSS
                        
                        /初识HTML(5)+CSS(3)-升级版

为什么结果还是无法居中？我到底哪里不对了！

<style>

.wrap h2{

margin:0;

height:100px;

line-height:100px;

background:#ccc;

}

</style>

</head>

<body>

<div class="wrap">

<h2>hi,imooc!</h2>

</div>

</body>

</html>

李玮哈

2018-12-07

源自：初识HTML(5)+CSS(3)-升级版 15-8

关注问题我要回答

1766

操作

收起

4 回答

qq_慕盖茨1067435
2019-02-20

垂直方向居中就行了啊不是水平居中

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

FrostyCris
2019-01-17

它这个居中是相对于父元素啦！

就像前面我们学水平居中的时候，一开始学的是几个字相对它的外框左右距离相同，

现在我们第一步做的也是文本相对外框上下距离相同，所以你的结果是对的~

你也可以把整体加宽一点看看，那样垂直居中更加明显：

    height:200px;
  line-height:200px;
    background:#ccc;

结果是这样：

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

慕神121
2018-12-12

<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8">

<title>垂直居中</title>

<style>

.wrap h2{

margin:0;

height:100px;

line-height:100px;text-align:center;

background:#ccc;

}

</style>

</head>

<body>

<div class="wrap">

<h2>hi,imooc!</h2>

</div>

</body>

</html>

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

#1

Sherlock_bourne

你加了text-align:center后，不仅垂直方向相对于背景框居中，并且水平也居中了

2018-12-26 回复有任何疑惑可以回复我~

ILYSH
2018-12-07

这个垂直居中是在块里看的，不是从浏览器看的。你是不是从浏览器的角度的居中？

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

举报

0/150

提交

取消

初识HTML(5)+CSS(3)-升级版

参与学习 1226018 人
解答问题 18235 个

HTML(5)+CSS(3)基础教程8小时带领大家步步深入学习标签用法和意义

本课相似问答

3 回答为什么ul没有居中？哪里错了？

8 回答为什么居中不了？

2 回答为什么我删除了width:500px，文字还是居中的啊？？？

2 回答这个到底是什么意思？为什么放在哪儿都是对的？

6 回答我想让两个div并列显示然后居中，为什么我设置了margin:10px auto却还是不能居中？

搜索更多本课相关问答

为什么结果还是无法居中？我到底哪里不对了！

我要回答关注问题

意见反馈帮助中心 APP下载