css 实现垂直水平居中 

<html>

<head>
    <meta name="viewport" content="width=device-width, minimum-scale=0.1">
    <title>垂直水平居中</title>
</head>
<style>
/*1 绝对定位+margin */
#container1 {
}
#center1 {
    position:absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin:auto;
}
/*2 flex 需要设置父容器高度*/
#container2 {
   height: 800px;
   display: flex;
   justify-content: center;
   align-items: center;
}
/*3 table-cell  需要设置父容器宽高*/
#container3{
    width: 1000px;
    height: 800px;
    display:table-cell;
    text-align:center;
    vertical-align:middle;
}

/*4 transform  */
#container4{
    position: relative;
}
#center4{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

h1{
    color: #fff;
}
</style>
<body   style="margin: 0px; background: #0e0e0e;">
<h1>推荐 绝对定位+margin  和   transform</h1>
<div id="container2">
    <img id="center2" style="-webkit-user-select: none;" src="http://picttypec.jnby.com/20180930-jifen-JNBY1.jpg">
</div>
    
</body>

</html>

 

posted on 2019-03-05 11:48  邹敏向日葵  阅读(243)  评论(0)    收藏  举报

导航