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

来源：动视网责编：小OO 时间：2020-11-02 22:13:32

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；} <；<；<。

推荐度：

点击下载本文 文档为doc格式

导读推荐参考：《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；} <；<；<。

css实现元素对齐（居中对齐弹性盒的各项 <div> 元素），在我们网页设计中是较为常见的一个功能效果。我们可以通过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>

效果如下图：