水平垂直居中

2018-12-27  本文已影响4人  从不放弃

指定父级宽高 子级不定

1、transform: translate(-50%, -50%)

缺点:IE9以下不支持

.set-fun {
  position: relative;
  height: 128px;
  width: 128px;
  text-align: center;
  background-color: white;
}

.set-fun .fun-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

2、table table-cell

缺点:IE8以下不支持

#container_outer{
    display:table;
    overflow:hidden;
    width:600px;
    height:400px;
}   
#container_inner{
    vertical-align:middle;
    display:table-cell;
    text-align:center;
    border:1px solid #000;
} 
#content{
    display:inline-block;
    border:1px solid #000;
}
<div id="container_outer">
    <div id="container_inner">
        <div id="content">
            动态内容...<br/>  
            动态内容...<br/>
            动态内容...
        </div>
    </div>
</div> 

a、table table-cell vertical-align:middle; 保证了垂直居中
b、 text-align:center; display:inline-block; 保证了水平居中

上一篇 下一篇

猜你喜欢

热点阅读