摘要：说到布局除了浮动以及定位外还有一个不得不提的点，那就是居中，居中问题我们在网页布局当中经常遇到，那么以下就是分为两部分来讲，一部分是传统的居中，另一种则是居中，每个部分又通过分为水平垂直居中来讲。参考参考学习布局视觉格式化模型居中详解
说到布局除了浮动以及定位外还有一个不得不提的点，那就是居中，居中问题我们在网页布局当中经常遇到，那么以下就是分为两部分来讲，一部分是传统的居中，另一种则是flex居中，每个部分又通过分为水平垂直居中来讲。
对于inline元素以及纯文本只需要为父元素设置text-align: center;适用于 inline, inline-block, inline-table, inline-flex
对于block元素则需要为想要居中的block设置margin: 0 auto;
多个块级元素直接居中同单个块级居中一样，但是如果要在单行内居中，需要先通过display: inline-block将块级元素转化为行内块元素再按照行内元素为父元素添加text-align: center的居中方式居中。
单行情况下,可以为父元素设置相同的上下padding实现居中
如果只是单行文字也可以设置行高等于父元素高度实现居中
如果设置上下相同padding没有用的话，可能该元素是表格，可以使用vertical-align: middle设定对齐基线为middle实现居中。
要居中的元素高度固定的情况下，可以使用position来定位，设置top为50%，但是因为top是盒子上边界的定位距离，所以还要通过负值的margin-top往回拉宽度的一半。
(以下只写核心代码，其他宽度高度border自己加)
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
height: 100px;
margin-top: -50px;
}但是如果高度不固定的话则可使用变换来替换margin负值达到动态高度的一半
// 只需要替换上面的margin-top: -50px; height可以直接去掉了
transform: translateY(-50%);固定宽高下，同垂直居中方法一样，也是绝对定位50%然后通过margin负值拉回去
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
margin: -50px 0 0 -50px; // 宽高为100px
}
此为还有一种方法也可以实现已知宽高时候的居中
// 此处如果是不定宽高的话就会child铺满整个父元素
.child {
position: absolute;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
}// 同样是替换margin负值
transform: translate(-50%, -50%);
Flex的出现解决了传统居中方式难以实现的麻烦，仅需要几行代码就可以实现居中，Flex布局不仅能用于居中，在其他布局当中也相当的有效。想要启动Flex只要在父元素设置display： flex,内联元素的话则是display: inline-flex.
.parent {
display: flex;
justify-content: center;
}.parent {
display: flex;
align-items: center;
}.parent {
display: flex;
justify-content: center;
align-items: center;
}此外，如果想要实现竖着排列flex实现也很容易，仅需要换一下主轴方向，多添加一行就行了。
.parent {
flex-direction: column;
}
学习CSS布局
视觉格式化模型
css-tricks:居中详解
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/2043.html
摘要：高度模型浅识为的简写，简称为块级格式化上下文，为浏览器渲染某一区域的机制，中只有和中还增加了和。并非所有的布局都会在开发中使用，但是其中也会涉及一些知识点。然而在不同的纯制作各种图形纯制作各种图形多图预警 一劳永逸的搞定 flex 布局 寻根溯源话布局 一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候，看到 float 属性不...
摘要：常用于控制页面布局的定位机制普通流相对定位绝对定位和固定定位。左右布局最常用的就是通过浮动左浮或右浮来实现浮动。可以通过设置左右的外边距为值来居中包括图片。 这里，就CSS左右布局，左中右布局，水平与垂直居中，进行讨论。 CSS常用于控制页面布局的定位机制：普通流、相对定位、绝对定位和固定定位。还可以使用float属性来让元素浮动。 1.左右布局 最常用的就是通过浮动（左浮或右浮）来实...
摘要：到此，我们了解常见的布局解决方案，这些只是参考，一样的布局实现方式多种多样。主要就使用从很久很久以前起，我们就抛弃了布局页面，但是异常强大等属性目前兼容性较差傲娇的程序员应该放弃太低版本的浏览器转自常见布局解决方案 水平居中布局 1.margin + 定宽 Demo .child { width: 100px; margin: 0 auto; } ...
阅读 1760·2021-11-22 09:34
阅读 1103·2021-10-09 09:44
阅读 2942·2021-09-29 09:35
阅读 3584·2021-09-14 18:01
阅读 1428·2021-08-16 10:49
阅读 1064·2019-08-29 14:11
阅读 770·2019-08-29 12:47
阅读 3040·2019-08-26 13:47
