绝对定位水平垂直居中

你的名字 2023-02-13 14:57 259阅读 0赞

1.绝对定位水平垂直居中

  1. <style> .box { 
  2.             position: absolute;
  3.             /* 1. left 走 50% 父容器宽度的一半 */
  4.             left: 50%;
  5.             /* 2. margin 负值 往左边走 自己盒子宽度的一半 */
  6.             margin-left: -100px;
  7.             top: 50%;
  8.             margin-top: -100px;
  9.             width: 200px;
  10.             height: 200px;
  11.             background-color: pink;
  12.             /* margin: auto; */
  13.         }
  14.     </style>

2.图片在盒子中垂直水平居中

  1. <style>
  2.         body { 
  3.             background-image: url(images/bg.jpg);
  4.             background-repeat: no-repeat;
  5.             //水平居中
  6.             /* background-position: center top; */
  7.             background-position: center top;
  8.             //垂直水平居中
  9.             background-position: center ;
  11.         }
  12.     </style>

3.块级盒子水平居

外边距可以让块级盒子水平居中，但需要满足两个条件：

  • 盒子必须指定了宽度

  • 盒子左右的外边距都设置为auto

4.行内元素或者行内块元素水平居中

  • 给其父元素添加 text-align:center 即可



    里面的文字




在这里插入图片描述

发表评论

表情：
评论列表 （有 0 条评论，259人围观）

还没有评论，来说两句吧...

相关阅读

    相关 水平垂直居中

    （1）水平居中： 元素为行内元素，设置父元素text-align:center 如果元素宽度固定，可以设置左右margin为auto 如果元素为绝对定位（或

    你的名字你的名字/ 0 赞/ 339 阅读