css常用元素水平垂直居中方案

前端  /  管理员 发布于 7年前   184

flex实现水平垂直居中

适用场景：父子宽高都可未知(比较推荐这种方式，简单，而且目前兼容性也不错。)

<html>  <head>    <style>      .parent {          width: 100%;          height: 100px;          background: cyan;          display: flex;          justify-content: center;          align-items: center;        }        .son {          width: 20%;          height: 20%;          background: pink;        }    </style>  </head>  <body>    <div class='parent'>       <div class='son'></div>    </div>  </body></html>

绝对定位加上负margin

适用场景：父元素宽高已知未知都行，但是首先得有宽高。其次子元素的宽高必须已知，因为需要设置子元素的负margin. (也可以将负margin设置成translate来做位移实现)

<html>  <head>      <style>      .parent {          position: relative;          width: 200px;          height: 200px;          background: pink;        }        .son {          position: absolute;          left: 50%;          top: 50%;          margin-left: -25px;          margin-top: -25px;          width: 50px;          height: 50px;          background: yellow;        }      </style>  </head>  <body>    <div class='parent'>       <div class='son'></div>    </div>  </body></html>

绝对定位 + auto margin

适用场景：父子元素宽高都未知的情况(该方式不需要明确知道子元素宽高，子元素宽高可用百分比，对于子元素宽高不确定需要居中的情况比较适合。)

<html>  <head>    <style>      .parent {          position: relative;          width: 200px;          height: 200px;          background: cyan;        }        .son {          position: absolute;          left: 0;          top: 0;          bottom: 0;          right: 0;          margin: auto;          width: 10%;          height: 10%;          background: yellow;        }    </style>  </head>  <body>    <div class='parent'>       <div class='son'></div>    </div>  </body></html>

网格布局

适用场景：父子元素宽高未知，兼容性不大好

<html>  <head>    <style>      .parent {          display: grid;      }      .son {        jusitify-self: center;        align-self: center;      }    </style>  </head>    <body>      <div class='parent'>       <div class='son'></div>    </div>    </body></html>

Table-cell + text-align + vertical-align

适用场景: 父元素大小已知（非百分比高度），子元素大小未知，但子元素须为行内块元素，较好的兼容性

<html>  <head>    <style>      .parent {          display: table-cell;          vertical-align: middle;          text-align: center;          width: 100vw;          height: 90vh;          background-color: yellowgreen;        }        .son {          display: inline-block;          width: 200px;          height: 200px;          background-color: Indigo;        }    </style>  </head>  <body>    <div class='parent'>       <div class='son'></div>    </div>  </body></html>

伪元素

适用场景：父子宽高都可未知，子元素需为行内块元素(这种方式其实就是使用伪元素的高度为100%，子元素和伪元素都设置 vertical-align: middle实现垂直居中的效果)

<html>  <head>    <style>    .parent {      height: 100vh;      width: 100vw;      text-align: center;      background: #c0c0c0;    }         .parent:before {      content: "\200B";      display: inline-block;      height: 100%;      vertical-align: middle;    }         .son {      display: inline-block;      vertical-align: middle;      width: 200px;      height: 200px;      padding: 10px 15px;      background: #f5f5f5;    }    </style>  </head>  <body>    <div class="parent">      <div class="son"></div>    </div>  </body></html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。


  • 上一条：
    通过css3动画和opacity透明度实现呼吸灯效果
    下一条：
    深入理解CSS中的line-height的使用

    • 昵称：

    邮箱：

    0条评论 (评论内容有缓存机制,请悉知!)
    Top

    Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号 PHP交流群

    侯体宗的博客