CSS怎么实现弹性盒中的元素居中对齐

互联网 18-11-30

css实现元素对齐（居中对齐弹性盒的各项

元素），在我们网页设计中是较为常见的一个功能效果。我们可以通过css中的align-items等相关css属性来实现。

推荐参考：《CSS教程》

下面我们就通过具体的代码示例，为大家介绍css怎么实现弹性盒中元素居中对齐。

<!DOCTYPE> <html> <meta charset="utf-8"> <head>     <title></title>     <style type="text/css">         #xyz {             width: 200px;             height: 250px;             border: 1px solid black;             display: -webkit-flex; /* Safari */             -webkit-align-items: center; /* Safari 7.0+ */             display: flex;             align-items: center;         }         #xyz div {             -webkit-flex: 1; /* Safari 6.1+ */             flex: 1;         }     </style>  </head> <body> <div id="xyz">     <div style="background-color:#99FF99;">内容1</div>     <div style="background-color:#33CCFF;">一些文件的内容</div>     <div style="background-color:#FF99FF;">内容2</div> </body> </html>

效果如下图：