资讯专栏INFORMATION COLUMN

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

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

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

Wuv1Up / 2591人阅读

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

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

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

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

</>复制代码 
  2.   
</>复制代码 
  1. .content {
  2.   width:1000px;
  3.   height:100px;
  4.   background:red;
  5.   margin:0 auto;
  6. }

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

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

</>复制代码 
  2.   
  3.   
  4.   
  5.   
  6.   
</>复制代码 
  1. .wrap {
  2.   text-align: center;
  3. }
  4. .content {
  5.   display: inline-block;
  6.   width: 100px;
  7.   height: 100px;
  8.   background: red;
  9. }

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

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

</>复制代码 
  2.   
  3.     快过年了快过年了快过年了快过年了快过年了快过年了快过年了
  4.   
</>复制代码 
  1. .wrap {
  2.   position: relative;
  3. }
  4. .content {
  5.   position: absolute;
  6.   left: 50%;
  7.   width: 200px;
  8.   height: 100px;
  9.   margin-left: -100px;
  10.   background: red;
  11. }

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

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

</>复制代码 
  2.   
  3.     快过年了快过年了快过年了快过年了快过年了快过年了快过年了
  4.   
</>复制代码 
  1. .wrap {
  2.   position: relative;
  3. }
  4. .content {
  5.   position: absolute;
  6.   left: 50%;
  7.   height: 100px;
  8.   background: red;
  9.   transform: translateX(-50%);
  10. }

(5) flex布局

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

</>复制代码 
  2.   
  3.     快过年了快过年了快过年了快过年了快过年了快过年了快过年了
  4.   
</>复制代码 
  1. .wrap {
  2.   display: flex;
  3.   justify-content: center;
  4. }
  5. .content {
  6.   height: 100px;
  7.   background: red;
  8. }
垂直居中布局

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

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

</>复制代码 
  2.   
  3.     快过年了快过年了快过年了快过年了快过年了快过年了快过年了
  4.   
</>复制代码 
  1. .wrap {
  2.   display: table-cell;
  3.   vertical-align: middle;
  4.   height: 200px;
  5. }
  6. .content {
  7.   width: 100px;
  8.   background: red;
  9. }

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

</>复制代码 
  1. .wrap {
  2.   position: relative;
  3.   height: 200px;
  4. }
  5. .content {
  6.   position: absolute;
  7.   top: 50%;
  8.   width: 300px;
  9.   height: 100px;
  10.   margin-top: -50px;
  11.   background: red;
  12. }

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

</>复制代码 
  1. .wrap {
  2.   position: relative;
  3.   height: 200px;
  4. }
  5. .content {
  6.   position: absolute;
  7.   top:50%;
  8.   background: red;
  9.   transform: translateY(-50%);
  10. }

(4) flex布局

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

</>复制代码 
  2.   
  3.     快过年了快过年了快过年了快过年了快过年了快过年了快过年了
  4.   
</>复制代码 
  1. .wrap {
  2.   display: flex;
  3.   align-items: center;
  4.   height: 200px;
  5. }
  6. .content {
  7.   background: red;
  8. }
GPU云服务器 云服务器 布局居中 水平居中布局 div布局布局html 排版布局

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

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

相关文章

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

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

    JowayYoung 评论0 收藏0

  • 前端-CSS3&H5

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

    xiaolinbang 评论0 收藏0

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

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

    includecmath 评论0 收藏0

  • css--布局

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

    Nino 评论0 收藏0

发表评论

登陆后可评论

0条评论

Wuv1Up

男|高级讲师
我要私信

TA的文章

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