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

课程

/前端开发

/HTML/CSS

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

15-7用table只能相对于容器垂直居中，如何相对于浏览器垂直居中

<!DOCTYPE HTML>

<html>

<head>

<meta  charset="utf-8">

<title>父元素高度确定的多行文本</title>

<style>

  .wrap{height:300px;background:#ccc}

  .girl{height:500px;background:#ccc}

</style>

</head>


<body>

<table><tbody><tr><td class="wrap">

<div>

    <p>看我是否可以居中。</p>

    <p>看我是否可以居中。</p>

    <p>看我是否可以居中。</p>

    <p>看我是否可以居中。</p>

    <p>看我是否可以居中。</p>

</div>

</td></tr></tbody></table>


<!--下面是代码任务区-->

<table><tbody><tr><td class="girl">

<div>

    <img src="http://img1.sycdn.imooc.com//54ffac56000169c001840181.jpg" title="害羞的小女生"/>

</div>

</td></tr></tbody></table>

</body>

</html>

如何做到相对于浏览器窗口垂直居中呢

亦菲大魔王

2018-10-10

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

关注问题 我要回答
1567
操作
收起

正在回答

4 回答

慕神6204469
2019-03-03

<!DOCTYPE HTML>

<html>

<head>

<meta  charset="utf-8">

<title>父元素高度确定的多行文本</title>

<style>

  .wrap{height:300px;background:#ccc}

  .one {

      float:left;

      position:relative;

      left:50%;

      

  }

  img {

      position:relative;

      left:-50%;

      height:200px;

      line-height:200px;

  }

</style>

</head>


<body>

<table><tbody><tr><td class="wrap">

<div>

    <p>看我是否可以居中。</p>

    <p>看我是否可以居中。</p>

    <p>看我是否可以居中。</p>

    <p>看我是否可以居中。</p>

    <p>看我是否可以居中。</p>

</div>

</td></tr></tbody></table>


<!--下面是代码任务区-->

<div class="one">

    <img src="http://img1.sycdn.imooc.com//54ffac56000169c001840181.jpg" title="害羞的小女生"/>

</div>

</body>

</html>

题目要求相对

0 回复 有任何疑惑可以回复我~
收起回答
宅小白
2018-11-22

<html>

<head>

<meta  charset="utf-8">

<title>父元素高度确定的多行文本</title>

<style>

  .wrap{height:300px;background:#ccc;text-align:center;}

  table{

      margin:0 auto;

      margin-top:20px;

      border:2px solid red;

  }

</style>

</head>


<body>

<table><tbody><tr><td class="wrap">

<div>

    <p>看我是否可以居中。</p>

    <p>看我是否可以居中。</p>

    <p>看我是否可以居中。</p>

    <p>看我是否可以居中。</p>

    <p>看我是否可以居中。</p>

</div>

</td></tr></tbody></table>


<!--下面是代码任务区-->

<table><tbody><tr><td>

    <div class="div">

        <img src="http://img1.sycdn.imooc.com//54ffac56000169c001840181.jpg" title="害羞的小女生"/>

    </div>

</td></tr></tbody></table>

</body>

</html>


0 回复 有任何疑惑可以回复我~
收起回答
大西瓜Colin
2018-11-15

<style>

  .wrap{height:300px;background:#ccc}

  .littlegirl{

    position:fixed;

    top:0;

    left:0;

    height:100%;

  }

  </style>


1 回复 有任何疑惑可以回复我~
收起回答
歪歪歪歪歪_
2018-10-10

<!DOCTYPE HTML>
<html>
<head>
<meta  charset="utf-8">
<title>父元素高度确定的多行文本</title>
<style>
  .wrap{height:300px;background:#ccc}
  #tableGirl{position:fixed;top:0;left:50%;height:100%;}
  #imgGirl{position:relative;left:-50%;background-color:pink;}
</style>
</head>

<body>
<table><tbody><tr><td class="wrap">
<div>
    <p>看我是否可以居中。</p>
    <p>看我是否可以居中。</p>
    <p>看我是否可以居中。</p>
    <p>看我是否可以居中。</p>
    <p>看我是否可以居中。</p>
</div>
</td></tr></tbody></table>

<!--下面是代码任务区-->
<table id="tableGirl"><tbody><tr><td id="imgGirl">
<div>
    <img src="http://img1.sycdn.imooc.com//54ffac56000169c001840181.jpg" title="害羞的小女生"/>
</div>
</td></tr></tbody></table>
</body>
</html>


8 回复 有任何疑惑可以回复我~
收起回答
#1

mijac

为什么这里的height:100%;可以实现设置成窗口的100%？
2019-01-15 回复 有任何疑惑可以回复我~
#2

mijac

是因为position:fixed;吗？
2019-01-15 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消
初识HTML(5)+CSS(3)-升级版
  • 参与学习       1226021    人
  • 解答问题       18236    个

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

进入课程

本课相似问答

1 回答关于垂直居中的设置

2 回答如何设置文字垂直居中

4 回答图片垂直居中

2 回答垂直居中谁会？

4 回答请问这个块元素水平居中是相对于浏览器 还是相对于父元素？
搜索更多本课相关问答

15-7用table只能相对于容器垂直居中，如何相对于浏览器垂直居中

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