13518219792
CSS中的居中，在工作中，会经常遇到。它可以分为水平居中和垂直居中，以下是几种实现居中的方式。
网站制作、成都网站设计的开发，更需要了解用户，从用户角度来建设网站，获得较好的用户体验。成都创新互联多年互联网经验，见的多，沟通容易、能帮助客户提出的运营建议。作为成都一家网络公司，打造的就是网站建设产品直销的概念。选择成都创新互联，不只是建站，我们把建站作为产品，不断的更新、完善，让每位来访用户感受到浩方产品的价值服务。
以下例子中，涉及到的CSS属性值。
.parent-frame {
width: 200px;
height: 200px;
border: 1px solid red;
}
.child-frame {
width: 100px;
height: 100px;
border: 1px dotted blue;
}
块状元素，水平居中
子元素水平居中
块状元素，水平居中
子元素水平居中
块状元素，水平居中
水平居中。上下外边框距为0，左右外边距浏览器会自动计算平分
子元素水平居中
块状元素，水平居中
子元素水平居中
块状元素，水平居中
垂直居中。line-height属性，设置行间的距离（行高）。不允许使用负值。
单行文本的元素才适用，多行元素中不适用这种方法。元素内容是单行，并且其高度是固定不变的，
line-height值=父height值
web前端开发学习Q-q-u-n： 784783012 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法
（从零基础开始到前端项目实战教程，学习工具，职业规划）line-height值=父height值
给父元素设置float，然后将父元素整体向右移动50%，再将子元素整体向左移动50%，来实现水平居中。
记得将父元素清除浮动。
虽然宽度不同weiqinl
但一样
水平居中了
使用float属性，记得清楚浮动
虽然宽度不同weiqinl 但一样 水平居中了 使用float属性，记得清楚浮动
table默认垂直居中vertical-align:middle。如果还想要水平居中，那就是行内元素，添加属性text-align: center
table默认垂直居中[vertical-align: middle]
水平居中添加text-align:center
web前端开发学习Q-q-u-n： 784783012 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法
（从零基础开始到前端项目实战教程，学习工具，职业规划）
该属性设置元素的垂直对齐方式。
定义行内元素的基线相对于该元素所在行的基线的垂直对齐。在表单元格中，这个属性会设置单元格框中的单元格的对齐方式。
仿table: display:table-cell垂直居中vertical-align:middle
仿table: display:table-cell垂直居中vertical-align:middle
相对应于relative的绝对定位absolute，需要定宽。同时，top/bottom应该相等，并且相加不超过定宽度。 right/left也应该相等，并且相加不超过定宽。
再配合margin： auto使用
利用绝对定位，配合margin:auto自动计算外边距。
定宽元素,需要确定的尺寸。relative是为了给子元素定位用。
利用绝对定位，配合margin:auto自动计算外边距。 定宽元素,需要确定的尺寸。relative是为了给子元素定位用。
negative margins负边距，会使结构塌陷，利用这个特点来实现。
利用绝对定位，配合margin的负值来实现居中。
负边距来实现，水平垂直居中。需要知道该元素的具体大小
利用绝对定位，配合margin的负值来实现居中。 负边距来实现，水平垂直居中。需要知道该元素的具体大小
使用百分比来绝对定位一个元素，并配合使用translate，将元素移动定位居中。
利用绝对定位，配合translate移动到水平垂直居中。
不需知具体大小。支持IE9+及现代浏览器
利用绝对定位，配合translate移动到水平垂直居中。 不需知具体大小。支持IE9+及现代浏览器
父元素使用flex布局,并定义两个属性值justify-content，align-items都为center，那么就定义为水平垂直居中
justify-content属性定义了项目在主轴上的对齐方式。align-items属性定义项目在交叉轴上如何对齐。
使用flex布局，justify-content属性定义了项目在主轴上的对齐方式。
align-items属性定义项目在交叉轴上如何对齐。 两个属性都居中，则水平、垂直居中对齐
web前端开发学习Q-q-u-n： 784783012 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法
（从零基础开始到前端项目实战教程，学习工具，职业规划）使用flex布局，justify-content属性定义了项目在主轴上的对齐方式。 align-items属性定义项目在交叉轴上如何对齐。 两个属性都居中，则水平、垂直居中对齐
父元素使用flex布局，子元素使用margin: auto
父元素使用flex布局，子元素配合margin:auto使用
父元素使用flex布局，子元素配合margin:auto使用
