关于CSS 水平+垂直居中的问题,开发代码的过程中,会经常遇到。
那么,在这里,我会介绍几种方式,来实现CSS的水平+垂直居中。
首先,我们先将body,html的高度和宽度设置为100%,其次清除默认样式,margin和padding设置为0。
写个宽度和高度均为200px,青色的方块。
<!DOCTYPE html>
水平居中则可以用 margin: 0 auto;来设置。
我们都知道元素平时的默认状态是position = static (静态)。
垂直居中需要使 position = relative ,这样就可以用top 属性,使其移动。
另使用margin-top属性,因为自身是200px高度,所以减去自身一半的高度,就可以垂直居中。
<!DOCTYPE html>
这样就实现垂直居中的效果。
CSS3的transform的属性也可以实现向上偏移的效果。
transform:translateY(-50%) 意思是偏移自身高度的一半。
效果如下:
<!DOCTYPE html>
水平垂直居中
以上两种方法的代码链接。
另外CSS3中还有种方法 FLEX布局,实现水平垂直居中的方法。
/blog//07/flex-grammar.html 阮一峰老师的博客,大家可以看看,对于布局非常有帮助。
<!DOCTYPE html>