1、定义html界面<html><head><title>fixed水平居中demo</title></head><body><divclass="fixed"></div></body></html>
2、设置css样式.fixed{ position:fixed; width:100px; height:100px; /*top坐标居中*/ top:50%; /*left坐标居中*/ left:50%; /*由于元素的高度是100px所以此处设置为-50px以达到整个元素上移自己高度的一半，达到垂直居中*/ margin-top:-50px; /*由于元素的高度是100px所以此处设置为-50px以达到整个元素左移自己宽度的一半，达到水平居中*/ margin-left:-50px; border:solid1px#c5c5c5; border-radius:5px; background-color:blueviolet;}
3、整个页面内容如下：<html><head><title>fixed水平居中demo</title><style>.fixed{position:fixed;width:100px;height:100px;/*top坐标居中*/top:50%;/*left坐标居中*/left:50%;/*由于元素的高度是100px所以此处设置为-50px以达到整个元素上移自己高度的一半，达到垂直居中*/margin-top:-50px;/*由于元素的高度是100px所以此处设置为-50px以达到整个元素左移自己宽度的一半，达到水平居中*/margin-left:-50px;border:solid1px#c5c5c5;border-radius:5px;background-color:blueviolet;}</style></head><body><divclass="fixed"></div></body></html>
4、最终显示效果
