总结:让一个div垂直水平居中

让一个不定宽高的div,垂直水平居中的几种实现方式

不定宽高的div垂直居中的方式:

1、使用CSS方法:

父盒子设置:display:table-cell;text-align:center;vertical-align:middle;

不定宽高的div设置:display:inline-block;vertical-align:middle;

代码实现:

总结:让一个div垂直水平居中



效果:

总结:让一个div垂直水平居中



2、使用CSS3 transform

父盒子设置:display:relative

div:transform:transform(-50%,-50%);position:absolute; top:50%;left:50%;

代码实现:

总结:让一个div垂直水平居中


效果实现:

总结:让一个div垂直水平居中

3、弹性盒子

父盒子设置:display:flex; justify-content:center;align-items:center;

代码实现:

总结:让一个div垂直水平居中


效果实现:

总结:让一个div垂直水平居中

定宽高的div的垂直水平居中方式

1、margin负值

父盒子设置:position:relative;

div设置:top:50%;left:50%;margin-top:-25px;margin-left:-25px;

代码实现:

总结:让一个div垂直水平居中

效果实现:

总结:让一个div垂直水平居中

2、奇淫技巧

父盒子设置:position:relative;

div设置:position:absolute;margin:0 auto;top:0;left:0;right:0;bottom:0;

代码实现:

总结:让一个div垂直水平居中

效果实现:

总结:让一个div垂直水平居中