您好,欢迎来到二三娱乐。
搜索
您的当前位置:首页未知宽高div水平垂直居中3种方法

未知宽高div水平垂直居中3种方法

来源:二三娱乐

方法一:定位

父元素:
position:relative
子元素:
  position:absolute;  
  top:50%;  
  left: 50%;  
  -webkit-transform: translate(-50%, -50%);  
  transform: translate(-50%, -50%); 

方法二:flex布局

父元素样式:
display: flex;   
align-items: center;  
justify-content: center; 

方法三:

<style type="text/css">  
.middle-panel2{  
    width:500px;  
    border:1px solid #888;  
    display:inline-block;  
    vertical-align: middle;  
}  
.parent-panel2{  
    width:100%;  
    height:400px;  
    border:1px solid #888;  
}  
.parent-panel2:after{  
    /**主要代码*/  
    content:"";  
    display: inline-block;  
    vertical-align: middle;  
    height: 100%;  
}  
</style> 

Copyright © 2019- yule263.com 版权所有 湘ICP备2023023988号-1

违法及侵权请联系:TEL:199 1889 7713 E-MAIL:2724546146@qq.com

本站由北京市万商天勤律师事务所王兴未律师提供法律服务