HTML+CSS块级元素的垂直居中

块级元素的垂直居中分为两种情况。

　　一、元素是固定宽高，可以使用绝对定位的方法，让元素位置定位到父元素的正中心，然后利用外边距移动自身宽高的一半，从而达到垂直居中的效果

　　　　代码如下：

　　　　

　　　<style>
      .parent{
        width: 600px;
        height: 600px;
        background-color: #eee;
        position: relative;
      }
      .son{
        width: 300px;
        height: 300px;
        position: absolute;
        top: 50%;
        left: 50%;
        background-color: aqua;
        margin-top: -150px;
        margin-left: -150px;
      }
    </style>
    <div class="parent">
      <div class="son">
        垂直居中
      </div>
    </div>

　　二、元素不固定宽高，需要通过translate 变形函数来处理，代码如下

　　

    <style>
      .parent{
        width: 600px;
        height: 600px;
        background-color: #eee;
        position: relative;
      }
      .son{
        position: absolute;
        top: 50%;
        left: 50%;
        background-color: aqua;
        transform: translate(-50%,-50%)
      }
    </style>
    <div class="parent">
      <div class="son">
        垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中
      </div>
    </div>

 

转载于:https://www.cnblogs.com/banyuege/p/10669246.html