首页 前端知识 css居中方式大总结

css居中方式大总结

2024-03-21 15:03:03 前端知识 前端哥 185 979 我要收藏

css居中方式大总结

1、行内元素居中方式

  • text-align:center

2、块元素居中方式

  • 给有宽度的块元素设置左右margin为0 上下为auto margin:0 auto;

3、多个块元素居中方式

1、让父元素设置text-align: center

2、让子元素变成行内块元素

  • 样式:

  •   .wrapper {
            height: 100px;
            border: 2px dashed #f69c55;
            text-align: center;
          }
          .one {
            width: 200px;
            padding: 1rem;
            color: #fff;
            background: #000;
            display: inline-block;
          }
    
  • 结构:

  • <div class="wrapper">
          <div class="one">我是第一个</div>
          <div class="one">我是第二个</div>
          <div class="one">我是第三个</div>
     </div>
    
  • 效果:

  • 在这里插入图片描述

4、行内元素垂直居中方式

  • 通过设置内联元素的高度(height)和行高(line-height)相等,从而使元素垂直居中

5、换行块元素居中(一)

(不要问行内怎么做!类似需求就用块元素做)

  • 结构:

  •  <div class="wrapper">
          <p>
            这是一段关于居中的代码 <br />
            -wangfeng
          </p>
      </div>
    
  • 样式:

  •   .wrapper {
            display: table;
            height: 140px;
            border: 2px dashed #f69c55;
          }
        p {
            display: table-cell;
            vertical-align: middle;
        }
    
  • 效果:

  • 在这里插入图片描述

5-1、换行块元素居中(二)

  • 结构:

  •  <div class="wrapper">
          <b>
            这是一段关于居中的代码 <br />
            -wangfeng
          </b>
      </div>
    
  • 样式:

  •  .wrapper {
            height: 100px;
            border: 2px dashed #f69c55;
            display: flex;
            flex-direction: column;
            justify-content: center;
       }
    

5-2、多个块元素垂直居中

  • 结构

  •  <div class="wrapper">
          <p>
            这是一段关于居中的代码 <br />
            -wangfeng
          </p>
          <p>
            这是一段关于居中的代码 <br />
            -wangfeng
          </p>
          <p>
            这是一段关于居中的代码 <br />
            -wangfeng
          </p>
       </div>
    
  • 样式:

  •  .wrapper {
            height: 300px;
            border: 2px dashed #f69c55;
            display: flex;
            flex-direction: column;
            justify-content: center;
          }
      p {
          flex: 1;
       }
    
  • 效果:

在这里插入图片描述

6、块元素垂直方向居中(高度已知)

(前提:已知居中元素的高度和宽度)

(思路:通过绝对定位元素距离顶部50%,并设置margin-top向上偏移元素高度的一半,就可实现垂直居中。)

  • 结构:

  • <div class="wrapper">
          <div class="countent">站在巨人的肩上</div>
    </div>
    
  • 样式:

  •  .wrapper {
            height: 140px;
            position: relative;
            border: 2px dashed #f69c55;
          }
          .countent {
            position: absolute;
            width: 100px;
            height: 100px;
            top: 50%;
            margin-top: -50px;
            color: black;
            font-size: 20px;
            background-color: #bfa;
          }
    
  • 样式:

  • ![在这里插入图片描述](https://img-blog.csdnimg.cn/689dd55766e342d097f771bfc818bfa0.png

6-2块元素垂直方向居中(高度未知)

(前提:未知居中元素的高度和宽度)

(思路:借助CSS3中的transform属性向Y轴反向偏移50%的方法实现垂直居中,部分浏览器可能存在兼容性问题(基本不用管ie老大哥)。)

(拓展:这种利用transform属性做的东西我们还能改为水平居中)

  • 结构:

  • <div class="wrapper">
          <div class="countent">站在巨人的肩上</div>
     </div>
    
  • 样式:

  •  .wrapper {
            height: 140px;
            position: relative;
            border: 2px dashed #f69c55;
          }
          .countent {
            position: absolute;
            width: 100px;
            transform: translateY(-50%);
            top: 50%;
            color: black;
            font-size: 20px;
            background-color: #bfa;
          }
    
  • 效果

  • 在这里插入图片描述

7、水平居中(已知固定宽高)

(前提:已知固定宽高)

(思路:让他相对于父元素进行定位top和left都设置为50%,在会自身宽高的一半即可)

  • 结构:

  •  <div class="wrapper">
          <div class="countent">站在巨人的肩上</div>
     </div>
    
  • 样式:

  •    .wrapper {
            height: 140px;
            position: relative;
            border: 2px dashed #f69c55;
          }
          .countent {
            position: absolute;
            width: 100px;
            height: 50px;
            padding: 5px;
            top: 50%;
            left: 50%;
            margin: -25px 0 0 -50px;
            color: rgb(255, 204, 0);
            font-size: 20px;
            background-color: rgb(0, 0, 0);
          }
    
  • 效果:

  • 在这里插入图片描述

7-1、水平居中(未知固定宽高)

(前提:未知固定宽高)

(思路:利用2D变换,在水平和垂直方向都反向平移宽高的一半,从而使元素水平垂直居中。)

  • 结构:

  • <div class="wrapper">
          <div class="countent">站在巨人的肩上</div>
     </div>
    
  • 样式:

  • .wrapper {
            height: 140px;
            position: relative;
            border: 2px dashed #f69c55;
          }
          .countent {
            position: absolute;
            padding: 5px;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: rgb(255, 204, 0);
            font-size: 20px;
            background-color: rgb(0, 0, 0);
          }
    
  • 效果:

  • 在这里插入图片描述

7-1、水平居中(未知宽高)

(前提:未知宽高)

(思路:利用flex布局,其中justify-content用于设置或检索弹性盒子元素在主轴上方向上的对齐方式;而align-items属性定义flex子项在flex容器的当前行的侧轴方向上的对齐方式。)

[解析: (主轴也就是水平方向的轴) – ( 侧轴也就是垂直方向的轴) ]

  • 结构:

  • <div class="wrapper">
          <div class="countent">站在巨人的肩上</div>
    </div>
    
  • 样式:

  •   .wrapper {
            display: flex;
            justify-content: center;
            height: 140px;
            align-items: center;
            border: 2px dashed #f69c55;
          }
          .countent {
            color: rgb(255, 204, 0);
            font-size: 20px;
            background-color: rgb(0, 0, 0);
          }
    
  • 效果:

    .wrapper {
    display: flex;
    justify-content: center;
    height: 140px;
    align-items: center;
    border: 2px dashed #f69c55;
    }
    .countent {
    color: rgb(255, 204, 0);
    font-size: 20px;
    background-color: rgb(0, 0, 0);
    }

    
    
  • 效果:

  • 在这里插入图片描述

转载请注明出处或者链接地址:https://www.qianduange.cn//article/4026.html
标签
评论
发布的文章

jQuery和CSS选择器的使用

2024-04-15 09:04:55

HTML前端表单校验的方法

2024-04-15 09:04:46

使用jQuery写一个注册界面

2024-04-15 09:04:46

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!