当一个父级元素高度为百分比的时候，怎么让子元素垂直居中呢？

paradise

1791013

发布于
2015-12-24

首先，line-height肯定不行了，增加标签清除浮动法必须得是块级元素？绝对定位可以吗？应该怎么写呢？感谢各位博学的大大花时间解答！！~~

css javascript html

html5

阅读 5.8k

6 个回答

wangfulin

✓ 已被采纳

方法还是挺多的，我写了2种：

一

html代码

<div class="container-wrapper">
    <div class="container">
      <div class="center">
        
      </div>
    </div>
  </div>

css代码

.container-wrapper{
  width:400px;
  height:300px;
}
.container{
  width:100%;
  height:100%;
  border:1px solid violet;
  position:relative;
}
.center{
  width:100px;
  height:100px;
  position:absolute;
  margin:auto;
  left:0px;
  top:0px;
  right:0px;
  bottom:0px;
  border:1px solid green;
}

二

html代码同上
css代码

.container-wrapper{
  width:400px;
  height:300px;
}
.container{
  width:100%;
  height:100%;
  border:1px solid violet;
  position:relative;
}
.center{
  border:1px solid green;
  width:100px;
  height:100px;
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
  -moz-transform:translate(-50%, -50%);
  -ms-transform:translate(-50%, -50%);
  -o-transform:translate(-50%, -50%);
  -webkit-transform:translate(-50%, -50%);

crystalmoore

671510

发布于
2015-12-24

http://www.cnblogs.com/crystalmoore/p/5041522.html 提供了4种方法
1.利用vertical-align:middle

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        body{margin: 0;}
        .father{width: 100%;height: 100%;position: fixed;left: 0;top: 0;text-align: center;font-size: 0;/*设置font-size为了消除代码换行所造成的空隙*/background:rgba(0,0,0,0.5); }
        .daughter{vertical-align: middle;}/*实现daughter居中*/
        .son{vertical-align: middle;display:inline-block;height: 100%;}
    </style>
</head>
<body>
<div class = "father">
    <div class="son"></div>
    <img class = "daughter" src="1.jpg" alt="我要居中">
</div>
</body>
</html>

2.使用transform实现

<style>
    body{margin: 0;}
    .father {position: absolute; left:50%; top:50%; -webkit-transform:translate(-50%,-50%); transform:translate(-50%,-50%);background:rgba(0,0,0,0.5); }
</style>
<div class="father">
    <img src="1.jpg">
</div>

3.弹性盒模型

<style>
    body{margin: 0;}
    .father{position:fixed; width:100%; height:100%; background:rgba(0,0,0,0.5); left:0px; top:0px;display:flex;justify-content:center;align-items:center;}
</style>


<div class="father">
        <img src="1.jpg">
</div>

4.用表格布局

<style>
*{margin:0px; padding:0px;}
table {position:absolute; width:100%; height:100%; text-align:center; background:rgba(0,0,0,0.5);}
.daughter {display:inline-block;}
</style>
<table>
    <tr>
        <td>
            <div class="daughter">
                <img src="1.jpg">
            </div>
        </td>
    </tr>
</table>

keep_M

47633252

发布于
2015-12-24

更新于
2015-12-24

  html,body{width: 100%;height: 100%;}
        .box{width: 300px;height:50%;overflow: hidden;margin: 200px auto;background: #DAC8A7;border-radius: 10px;}
        .item{width: 50px;height: 50px;border-radius: 50%;background: #4A4439;display: block;}
        .box {
          display: flex;
          align-items: center;/**居中**/
          flex-direction:column;
          justify-content:center;/**平均分**/
        }

<div class="box">
            <span class="item"></span>
        </div>