塊級子元素在父元素中實現水平垂直居中
阿新 • • 發佈：2019-02-13
原始碼：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<style>
.fu{background-color:pink;width:400px;height:400px;}
.zi{background-color:skyblue;width:100px;height:100px;}
</style>
</head>
<body>
<div class="fu">
<div class="zi" 方法一：
.fu{
position: relative;
}
.zi{
position: absolute;
top: 50%;
margin-top: -50px;
left: 50%;
margin-left: -50px;
}方法二：
.fu{
position: relative;
}
.zi{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom 方法三：
//新增以下樣式(使用css3定義的新屬性 IE10+)
.fu{display:flex;}
//將父元素設為彈性容器也可設為display:inline-flex;
//兩者的區別是設為inline-flex該元素視為內聯元素
.zi{margin:auto;}方法四：
//使用css3定義的新屬性 IE10+
.fu{
display:flex;
justify-content: center; //子元素水平方向居中
align-items: center;//子元素垂直方向居中
}方法五：
//IE10+
.fu