CSS如何水平垂直居中？
CSS如何水平垂直居中？
1、CSS如何实现水平居中？
margin: 0 auto
2、CSS如何实现水平垂直居中？
首先设置一个div元素，设置背景颜色以便看出变化。代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS水平垂直居中</title> <style> .content { width: 300px; height: 300px; background: blue; } </style> </head> <body> <div class="content"></div> </body> </html>
页面效果如下：
通过设置margin: 0 auto实现水平居中。代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS水平垂直居中</title> <style> .content { width: 300px; height: 300px; background: blue; margin: 0 auto } </style> </head> <body> <div class="content"></div> </body> </html>
页面效果如下：
如何实现垂直居中呢？
方法一：通过display:relative设置top、bottom、right、left等属性实现位置偏移
在这之前，我们先要设置div元素的祖先元素html和body的高度为100%（因为他们默认是为0的），并且清除默认样式，即把margin和padding设置为0（如果不清除默认样式的话，浏览器就会出现滚动条）
通过设置position可以实现元素向不同方向的移动。在默认情况下（position：static; //静止的、不可以移动的）我们不可以直接设置top、bottom、right、left等属性使它在文档中发生位置偏移，需要设置position的值为relative,absolute,fixed等（relative是不会使元素脱离文档流的，元素在文档流里是从上往下、从左到右紧密的布局的。）实现位置偏移。
代码实现如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS水平垂直居中</title> <style> html,body { width: 100%; height: 100%; margin: 0; padding: 0; } .content { width: 300px; height: 300px; background: blue; margin: 0 auto; /*水平居中*/ position: relative; /*脱离文档流*/ top: 50%; /*偏移*/ } </style> </head> <body> <div class="content"></div> </body> </html>
页面效果如下：
这时，并没有居中，图片显示效果偏下，因为这里我们设置top：50%，所以我们设置的块状元素在页面中心位置开始向下分布，需要设置margin-top: -150px;150px是块状元素一半的高度。代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS水平垂直居中</title> <style> html,body { width: 100%; height: 100%; margin: 0; padding: 0; } .content { width: 300px; height: 300px; background: blue; margin: 0 auto; /*水平居中*/ position: relative; /*脱离文档流*/ top: 50%; /*偏移*/ margin-top: -150px; } </style> </head> <body> <div class="content"></div> </body> </html>
页面效果如下：
方法二：通过CSS3的transform属性
CSS3的transform属性也可以实现这个功能，通过设置div的transform: translateY(-50%)，意思是使得div向上平移（translate）自身高度的一半(50%)。代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS水平垂直居中</title> <style> html,body { width: 100%; height: 100%; margin: 0; padding: 0; } .content { width: 300px; height: 300px; background: blue; margin: 0 auto; /*水平居中*/ position: relative; /*脱离文档流*/ top: 50%; /*偏移*/ transform: translateY(-50%); } </style> </head> <body> <div class="content"></div> </body> </html>
页面效果如下：
方法三：使用CSS3的弹性布局（flex）
使用CSS3的弹性布局很简单，只要设置父元素（这里是指body）的display的值为flex即可，代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS水平垂直居中</title> <style> html,body { width: 100%; height: 100%; margin: 0; padding: 0; } body { display: flex; align-items: center; /*定义body的元素垂直居中*/ justify-content: center; /*定义body的里的元素水平居中*/ } .content { width: 300px; height: 300px; background: blue; } </style> </head> <body> <div class="content"></div> </body> </html>
页面效果如下：
