Vertical centering of div without Javascript when

2019-08-02 03:09发布

站内问答 / HTML/CSS
1648 2 6

I would like to vertical center a div without JavaScript when its height isn't fixed.

I found here one idea.

I wonder if there are other solutions to this problem.

2条回答
Animai°情兽
2楼-- · 2019-08-02 03:45

Though this is an old thread, I think this answer might help someone. If the version of IE is flexible to at least IE > 8, then you can use display:table-cell and use the default vertical-align feature.

In the code below, the div.hover which is the div that is going to be vertically aligned middle is not assigned any height however the parent(s) are assigned 100% height to fill the screen.

Check this out

.outer {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-color: #aaa;
  display: table;
}
.inner {
  display: table-row;
  border: 1px solid #0f0;
  height: 100%;
}
.center {
  display: table-cell;
  border: 1px solid #00f;
  vertical-align: middle;
  height: 100%;
}
.hover {
  width:100px;
  border: 1px solid #f00;
  margin-left: auto;
  margin-right: auto;
}
<div class="outer">
  <div class="inner">
    <div class="center">
      <div class="hover">
        I am a random text to give the div some height
      </div>
    </div>
  </div>
</div>

查看更多
0人赞 添加讨论(0) 举报
甜甜的少女心
3楼-- · 2019-08-02 03:50

This works:

Here's link: http://jsbin.com/uvodop/2/edit

See how it's vertically aligned within the box. Height as well isn't fixed.

Hope it answers your question.

<html>
<head>
    <title>HTML Div vertical align using CSS</title>
    <style type="text/css">
        .outerDiv {
            border: solid 1px #000000;
            width: 300px;
            padding: 5px 2px 5px 2px;
        }

        .innerDiv {
            width: 95%;
            margin: 0px auto;
            padding: 40px 0px 40px 5px;
            border: solid 1px #000000;
        }
    </style>
</head>
<body>
    <div class="outerDiv">
        <div class="innerDiv">
            This text is placed inside the next HTML div tag.<br />
            CSS style is used to vertical align the nested div and text.
        </div>
    </div>
</body>
</html>
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)