爱站程序员基地1.使用flex布局
该方法涉及到弹性布局，具体请参考阮一峰
Flex 布局教程：语法篇 – 阮一峰的网络日志
“display:flex”实现CSS水平居中的方案简单直接。
通过display:flex实现CSS垂直居中的方法是给父元素display:flex;
通过align-items: center;属性进行垂直居中
justify-content属性进行水平居中
<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\" /><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" /><title>Document</title><style>* {margin: 0;padding: 0;}body,html {width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;}div {width: 100px;height: 100px;background: #64c5fd;}</style></head><body><div></div></body></html>
2使用定位position
然后用transform: translate(x, y);
<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\" /><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" /><title>Document</title><style>* {margin: 0;padding: 0;}body,html {width: 100%;height: 100%;}div {position: relative;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 100px;height: 100px;background: #64c5fd;}</style></head><body><div></div></body></html>
3.外边距结合定位来实现,其实跟上一种很相似。
margin: 0 auto;实现垂直居中
position：relative;top:50%()
transform: translateY();
<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\" /><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" /><title>Document</title><style>* {margin: 0;padding: 0;}body,html {width: 100%;height: 100%;}div {margin: 0 auto;position: relative;top: 50%;transform: translateY(-50%);width: 100px;height: 100px;background: #64c5fd;}</style></head><body><div></div></body></html>
看了这么多代码，咱来看一下效果图哈~
以上为个人总结，欢迎各位补充~~~
