资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/常见布局方法总结-居中布局

常见布局方法总结-居中布局

JowayYoung / 1088人阅读

摘要：常见布局方法总结水平居中布局使用场景页面整体水平居中，有具体宽度要求。

常见布局方法总结 水平居中布局

(1) width: (xxx)px; margin: 0 auto;

使用场景：页面整体水平居中，有具体宽度要求。


  


.content {
  width:1000px;
  height:100px;
  background:red;
  margin:0 auto;
}

(2) text-align: center; display: inline-block;

使用场景：子元素有多个且需要水平居中排列


  

  

  

  

  


.wrap {
  text-align: center;
}
.content {
  display: inline-block;
  width: 100px;
  height: 100px;
  background: red;
}

(3) absolute+left:50%+margin-left:-width/2

使用场景：子元素宽度确定，子元素之间互不影响


  

    快过年了快过年了快过年了快过年了快过年了快过年了快过年了
  


.wrap {
  position: relative;
}
.content {
  position: absolute;
  left: 50%;
  width: 200px;
  height: 100px;
  margin-left: -100px;
  background: red;
}

(4) absolute+left:50%+translateX(-50%)

使用场景：子元素宽度不确定，支持css3的translate属性，子元素之间互不影响


  

    快过年了快过年了快过年了快过年了快过年了快过年了快过年了
  


.wrap {
  position: relative;
}
.content {
  position: absolute;
  left: 50%;
  height: 100px;
  background: red;
  transform: translateX(-50%);
}

(5) flex布局

使用场景: 支持flex布局方式的浏览器都可以使用此布局，结合了(2)(4)两种方法的优点，无需考虑子元素宽度，且支持多个子元素居中


  

    快过年了快过年了快过年了快过年了快过年了快过年了快过年了
  


.wrap {
  display: flex;
  justify-content: center;
}
.content {
  height: 100px;
  background: red;
}
垂直居中布局

相比水平居中布局，垂直居中稍微坑了一点，实现方法并没有灵活。

(1)table-cell布局
使用场景：多行文字上下居中


  

    快过年了快过年了快过年了快过年了快过年了快过年了快过年了
  


.wrap {
  display: table-cell;
  vertical-align: middle;
  height: 200px;
}
.content {
  width: 100px;
  background: red;
}

(2)absolute+top:50%+margin-top:-height/2
使用场景：与水平居中一样，适用于子元素高度确定，不会对其他子元素造成影响的情况下的上下居中,由于是绝对定位，父元素需要占据空间，若没有其他子元素，需设置一个高度

.wrap {
  position: relative;
  height: 200px;
}
.content {
  position: absolute;
  top: 50%;
  width: 300px;
  height: 100px;
  margin-top: -50px;
  background: red;
}

(3) absolute+top:50%+translateY(-50%)
使用场景：与水平居中一样，适用于子元素高度不确定，不会对其他子元素造成影响的情况下的上下居中,由于是绝对定位，父元素需要占据空间，若没有其他子元素，需设置一个高度

.wrap {
  position: relative;
  height: 200px;
}
.content {
  position: absolute;
  top:50%;
  background: red;
  transform: translateY(-50%);
}

(4) flex布局

使用场景: 支持flex布局方式的浏览器都可以使用此布局，无需考虑子元素高度，书写简便快捷


  

    快过年了快过年了快过年了快过年了快过年了快过年了快过年了
  


.wrap {
  display: flex;
  align-items: center;
  height: 200px;
}
.content {
  background: red;
}
云服务器 GPU云服务器 布局居中 水平居中布局 div布局布局html 排版布局

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/50374.html

相关文章

  • 常见布局方法总结-居中布局

    摘要：常见布局方法总结水平居中布局使用场景页面整体水平居中，有具体宽度要求。 常见布局方法总结 水平居中布局 (1) width: (xxx)px; margin: 0 auto; 使用场景：页面整体水平居中，有具体宽度要求。 showImg(https://segmentfault.com/img/bVH7rO?w=1347&h=216); .content { width:...

    Wuv1Up 评论0 收藏0

  • 前端-CSS3&H5

    摘要：高度模型浅识为的简写，简称为块级格式化上下文，为浏览器渲染某一区域的机制，中只有和中还增加了和。并非所有的布局都会在开发中使用，但是其中也会涉及一些知识点。然而在不同的纯制作各种图形纯制作各种图形多图预警 一劳永逸的搞定 flex 布局 寻根溯源话布局 一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候，看到 float 属性不...

    xiaolinbang 评论0 收藏0

  • CSS布局十八般武艺都在这里了

    摘要：清单一些说明注意文档的书写顺序，先写两侧栏，再写主面板，更换后则侧栏会被挤到下一列圣杯布局和双飞翼布局都会用到。可以通过设置的属性或使用双飞翼布局避免问题。双飞翼布局不用设置相对布局，以及对应的和值。 本文首发于知乎专栏：前端指南 CSS布局 布局是CSS中一个重要部分，本文总结了CSS布局中的常用技巧，包括常用的水平居中、垂直居中方法，以及单列布局、多列布局的多种实现方式（包括传统的...

    includecmath 评论0 收藏0

  • css--布局

    摘要：布局方式布局的传统解决方案，基于盒状模型，依赖属性属性属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。关于布局，当然肯定还有更多的更好的方法。 接触前端开发也有半年了，每当需要将一个空白的纸，画成一个页面的时候，总会出现不知所措的几秒钟。除了因为对css中的各种属性的不熟练之外，更难为人的是怎么简练的将这些属性排列组合起来。其实静下心来，仔细想一想，无非就是整体-->局...

    Nino 评论0 收藏0

发表评论

登陆后可评论

0条评论

JowayYoung

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<