<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
<style>
.flex-container {
display: -webkit-flex;
display: flex;
/*三個div被擠到中間了*/
align-content: center;
/*以中間划一條線，前兩個div在這條線的上面居中，后面一個div在這條線的下面居中*/
/* align-items: center; */
flex-wrap: wrap;
width: 200px;
height: 400px;
background-color: lightgrey;
}
.flex-item {
background-color: cornflowerblue;
width: 100px;
height: 100px;
}
/* .self{
align-self: center;
} */
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item self">flex item 1</div>
<div class="flex-item ">flex item 2</div>
<div class="flex-item">flex item 3</div>
</div>
</body>
</html>
<!--
三種垂直對齊
1、align-items:center 寫在父級，最常用的垂直居中，在不換行的情況下居中在父級容器的正中間，換行的情況下是中間一條線，然后在分兩部分居中（可運行后看效果）。
1.1align-items:center 會使子級元素不能繼承父級元素的高度。
2、align-content:center 寫在父級，用於修改 flex-wrap 屬性的行為(如果不換行，則無效)，所有的子級都會在父級的正中間（可運行后看效果）
3、align-self:center;
3.1寫在子級上，自身居中。且父級不能用flex-wrap:wrap;換行屬性。
3.2除了默認值stretchc;外其它的屬性值，高度都不能在繼承父級的高度了。
3.3當元素自身設置有align-self屬性，和父級設置align-item屬性時，先聽自身的。
-->
彈性布局的三種垂直居中
免責聲明！
本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。