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

你可能感兴趣的:(HTML+CSS块级元素的垂直居中)