在使用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>
这样一来就可以实现在网页上居中啦~
效果如下图所示 ：
