在使用html/css编写网页时,有时需要让一段文字或图片等在整个网页居中,即既是水平居中又是垂直居中,而单单使用 text-align:center 只是让文字在水平上居中,而无法在垂直方向上也居中:
<!DOCTYPE html><head><style>.word{font-size: 50px;text-align: center;}</style></head><body><div class="word">Hello world!</div></body></html>
所以这里提出一种实现方法
在该div(文字、图片等)的CSS样式语句中加入以下属性的配置:
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
如果有的因为浏览器兼容问题而无法显示的,可以按需加上各不同浏览器的标识:
-webkit-transform: translate(-50%, -50%); ——> safari、chrome浏览器-moz-transform: translate(-50%, -50%); ——> firefox浏览器-ms-transform: translate(-50%, -50%); ——> ie浏览器-o-transform: translate(-50%, -50%);——> opera浏览器
以上面的代码为例,修改后的代码如下:
<!DOCTYPE html><head><style>.word{font-size: 50px;position: absolute;top: 50%;left: 50%;-webkit-transform: translate(-50%, -50%);-moz-transform: translate(-50%, -50%);-ms-transform: translate(-50%, -50%);-o-transform: translate(-50%, -50%);transform: translate(-50%, -50%);}</style></head><body><div class="word">Hello world!</div></body></html>
这样一来就可以实现在网页上居中啦~
效果如下图所示 :