欢迎光临
我的个人博客网站

元素居中显示方法总结


元素居中显示

  • 块级元素居中显示

    • 在body中的某个元素(box1)

      .box1 {   margin: 0 auto; } 
    • 通过绝对定位在父容器里居中垂直显示

      // 方法一: .box1 {   position: absolute;   top: 0;   right: 0;   bottom: 0;   left: 0;   margin: auto; }  // 方法二:(更加简洁) .box1 {   position: absolute;   top: 50%;   left: 50%;   transform: translate(-50%, -50%); } 
    • 弹性盒模型(居中)

      // 可以给box1的父级元素设置为flex .xxx {   display: flex;   justify-content: center;   align-items: center } 
  • 文字实现居中显示

    • 水平居中

      // 给父级块元素设置 { 	text-align: center; } 
    • 垂直居中

      // 给父级块元素设置 { 	height: 50px; 	line-height: 50px; } 

有什么遗漏的或者错误的地方,请指正。共同学习、共同进步。

赞(0) 打赏
未经允许不得转载:张拓的天空 » 元素居中显示方法总结
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏