摘要：常见布局方法总结水平居中布局使用场景页面整体水平居中，有具体宽度要求。
常见布局方法总结 水平居中布局
(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:...
摘要：高度模型浅识为的简写，简称为块级格式化上下文，为浏览器渲染某一区域的机制，中只有和中还增加了和。并非所有的布局都会在开发中使用，但是其中也会涉及一些知识点。然而在不同的纯制作各种图形纯制作各种图形多图预警 一劳永逸的搞定 flex 布局 寻根溯源话布局 一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候，看到 float 属性不...
摘要：高度模型浅识为的简写，简称为块级格式化上下文，为浏览器渲染某一区域的机制，中只有和中还增加了和。并非所有的布局都会在开发中使用，但是其中也会涉及一些知识点。然而在不同的纯制作各种图形纯制作各种图形多图预警 一劳永逸的搞定 flex 布局 寻根溯源话布局 一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候，看到 float 属性不...
摘要：清单一些说明注意文档的书写顺序，先写两侧栏，再写主面板，更换后则侧栏会被挤到下一列圣杯布局和双飞翼布局都会用到。可以通过设置的属性或使用双飞翼布局避免问题。双飞翼布局不用设置相对布局，以及对应的和值。 本文首发于知乎专栏：前端指南 CSS布局 布局是CSS中一个重要部分，本文总结了CSS布局中的常用技巧，包括常用的水平居中、垂直居中方法，以及单列布局、多列布局的多种实现方式（包括传统的...
阅读 2716·2021-09-22 15:52
阅读 2697·2019-08-30 15:55
阅读 2600·2019-08-30 15:53
阅读 2345·2019-08-30 13:21
阅读 1501·2019-08-30 13:10
阅读 4557·2019-08-27 11:07
阅读 2335·2019-08-26 12:09
阅读 2429·2019-08-26 10:33
