垂直居中—3行CSS3代码

 

 

 方法一：

.element {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

 

这用用的好处了，无论是块级元素还是行内元素，都可以进行垂直居中，

transform意思是变形，是css3的内容

 

注意，这只是垂直居中，如果是上下左右居中，还需要加个width与margin:atuo

想看详细信息，可看出处：http://www.webhek.com/post/translatey-vertical-align.html

 

方法二：

就像下面，只需要给.container三行css规则就可以使它在水平方向和垂直方向均处于居中。

.container {
      display: flex;
      justify-content: center;
      align-items: center;
}

　　

 

 

 

完整代码：

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>垂直居中</title>
    <style>
    * {
        margin: 0;
        padding: 0;
    }
     
    .center {
        width: 200px;
        height: 200px;
        margin: 0 auto;
        background: #1879D9;
    }
     
    .center p {
        background: #fff;
        position: relative;
        top: 50%;
        transform: translateY(-50%);
        margin: 0 auto;
        width: 100px;
    }
    </style>
</head>
<body>
    <div class="center">
       <p>垂直居中内容</p>
    </div>
</body>
</html>

 

 

 

 

 

 

 

 

 

 

-----完-----

posted @ 2017-10-17 08:37  彭胜光  阅读(344)  评论(0)  编辑  收藏  举报