方法一： align-self
父级加上
div{display：flex}子元素
span { flex-grow: 1; align-self: center; }
这种方法仅仅适应于外层元素中只包含一个子元素，或者子元素是独占一行的，因为这个时候对子元素进行设置宽度是无效的,设置了 flex-grow: 1；会是如下的效果
如果想设置一个div水平垂直都居中那么只需要将flex-grow去掉，加上宽度并设置margin:auto即可，
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>lazyload</title> <style> html,body{ margin:0; padding:0; width:100%; height:100% } #pictures{ display:flex; width:100%; height:100% } #pictures>span{ width:200px; height:200px; border:1px solid red; flex-grow:1; align-self:center } </style> </head> <body> <div id="pictures"> <span></span> </div> </body> </html>效果
方法一：align-items
父级元素加上
display: flex; align-items: center; /*定义body的元素垂直居中*/ justify-content: center; /*定义body的里的元素水平居中*/
直接上代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>index</title> <style> html,body { width: 100%; height: 100%; margin: 0; padding: 0; } body { display: flex; align-items: center; /*定义body的元素垂直居中*/ justify-content: center; /*定义body的里的元素水平居中*/ } .content1,.content2 { width: 300px; height: 300px; } .content1{ background: orange; } .content2{ background:pink; } </style> </head> <body> <div class="content1"></div> <div class="content2"></div> </body> </html>效果：
转载于:https://www.cnblogs.com/pengfei25/p/10319564.html
