css - 如何实现不定宽高水平和垂直居中
本文介绍了css - 如何实现不定宽高水平和垂直居中的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
如何实现不定宽高不定水平居中?absolute margin:二分之一宽高不顶用,这种情况是要宽高已知才能用
解决方案
1.最简单的flex
布局,外层容器加上如下样式即可
display: flex;
justify-content: center;
align-items: center;
2.利用table-cell
外层容器
display:table-cell;
text-align:center;
vertical-align:middle;
内部元素
vertical-align:middle;
display:inline-block;
3.使用CSS3 transform
外层容器
display:relative
内部元素
transform: translate(-50%,-50%);
position: absolute;
top: 50%;
left: 50%;
这篇关于css - 如何实现不定宽高水平和垂直居中的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文