梁先国SEO专注网站优化,让您网站更具价值!

当前位置:首页 > WEB前端学习 > [CSS3干货]用好这3个属性轻松实现不定宽高DIV居中!

[CSS3干货]用好这3个属性轻松实现不定宽高DIV居中!

时间:2018-08-18 23:53 来源:重庆网站制作公司(www.seozol.cn) 作者:重庆网站建设公司

 
 
 
[CSS3干货]用好这3个属性轻松实现不定宽高DIV居中!
 
 
  [CSS3干货]用好这3个属性轻松实现不定宽高DIV居中!

 
1.使用flex,在父元素设置
 
 
display: flex; 
 
justify-content: center;
 
align-items: center
 
 
 
2.使用css3的transform  
 
父元素设置:
 
display:relative
 
div 设置: 
 
transform: translate(-50%,-50%);
 
position: absolute;
 
top: 50%;
 
left: 50%;
 
3.使用display:table-cell   
 
父元素设置:
 
display:table-cell; 
 
text-align:center;
 
vertical-align:middle;
 
div 设置: 
 
display:inline-block;
 
vertical-align:middle;
本文标签:

版权声明:本文:[CSS3干货]用好这3个属性轻松实现不定宽高DIV居中! 由重庆网站制作公司(www.seozol.cn)原创内容,如需要转载请注明原文网址:重庆网站建设公司http://www.seozol.cn/

 
喜欢看,就分享到:

围观: 9999次 | 责任编辑:重庆网站建设公司

推荐文章

热门文章

最新文章

回到顶部