资讯专栏INFORMATION COLUMN

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

Wuv1Up / 2435人阅读

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

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

(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;
}

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

转载请注明本文地址: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条评论

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