块级子元素在父元素中实现水平垂直居中

源代码:


<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">div>
<div>
body>
html>

方法一:

.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: 0; 
    margin: auto;
}

方法三:

//添加以下样式(使用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{
    position: relative;
}
.zi{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    //使该元素分别向左和上移动宽高一半的距离
}

你可能感兴趣的:(css)