水平居中默认html:
divclass=' parent ' divclass=' child ' child/div/div默认css:
. parent{ width: 400px； height: 80px； line-height: 80px； background: #ccc； } .child{ width: 80px； height: inherit； color: #fff； background: #000； } 图示：
水平居中：
使用在线块文本对齐
通过text-align，可以将行内标签和行内块标签从块级标签更改为行内块标签，然后在父级使用text-align水平居中代码添加如下：
. parent {文本对齐：中心； }.child { display : inline-block； } 图示：
使用表格边距
子级使用table使其具有表块级元素的特性。 在这种情况下，可以使用边距左右自动特性将代码水平居中。
. child{5 display: table； 边距： 0自动； }图标：
使用相对定位和绝对定位转换
父级使用relative相对位置，子级child使用absolution相对于父级指定绝对位置。 然后，子级通过left50%，并将其左端定位在父级的中央。 然后，将transform的translateX设置为-50%，并将其中心定位在父代的中心代码中。
. parent{ position: relative； }.child{ position: absolute； left: 50%； - WebKit-transform 3360 translate x (-50 % )； - moz-transform 3360 translate x (-50 % )； - ms-transform 3360 translate x (-50 % )； - o-transform 3360 translate x (-50 % )； 变换：变换x (-50 % )； }图标：
使用flex justify-content
将父内部元素的布局更改为flex布局，并在justify-content中将内部元素约束在水平中心。 代码如下所示。
. parent{ display: flex； 内容：中心； }当然，使用flex margin也可以水平居中。 代码如下所示。
. parent{ display: flex；/* justify-content :中心； //.Child{Margin:auto； 在这两种情况下，都可以水平居中内部元素。 图标：
将默认html:垂直居中
divclass=' parent ' divclass=' child ' child/div/div默认css:
. parent{ width: 80px； height: 400px； background: #ccc； } .child{ width: inherit； height: 80px； color: #fff； background: #000； }图标：
垂直居中：
使用表格单元格垂直对齐
同样，使用表格元素的特性代码如下。
. parent{ display: table-cell； vertical-align :中间； }图标：
使用相对定位确定定位转换
根据与水平中心相同的原理，如果将position和transform的自偏移组合在一起，代码将为：
. parent{ position: relative； }.child{ position: absolute； top: 50%； - WebKit-transform 3360 translate y (-50 % )； - moz-transform 3360 translate y (-50 % )； - ms-transform 3360 translate y (-50 % )； - o-transform 3360 translate y (-50 % )； transform:translatey(-50%； 6使用66flex定位flex阵列项目
父级使用flex布局与align-items协作，以实现内部元素的垂直居中代码，如下所示：
. parent{ display: flex； align-items3360中心； }同样，在flex布局中可以使用边距。
. parent{ display: flex； /*align-items3360中心； */} .child{margin: auto 0； 这两种方法都可以位于元素的垂直中心
图标：
水平居中默认html :
divclass=' parent ' divclass=' child ' child/div/div默认css :
. parent{ width: 400px； height: 400px； background: #ccc； } .child{ width: 80px； height: 80px； line-height: 80px； 文本照明3360中心； color: #fff； background: #000； }图标：
水平居中：
inline-block text-align table-cell vertical-align
根据利用单元特性的想法，组合水平中心的inline-block text-align和垂直中心的table-cell vertical-align代码如下。
. parent{ display: table-cell； vertical-align :中间； 文本照明3360中心； }.child { display : inline-block； }图标：
使用相对位置和绝对位置的定位变换
同样，综合了水平中心和垂直中心的位置变换代码如下。
. parent{ position: relative； }.child{ position: absolute； top: 50%； left: 50%； - WebKit-transform 3360 translate (-50 %、-50%； - moz-transform 3360 translate (-50 %、-50%； - ms-transform 3360 translate (-50 %、-50%； -o-transform3360translate(-50%、-50%； transform:translate(-50%、-50%； }原理不言而喻，是全局top和left将内部要素的左上角对准父级中心，然后通过translate进行内部偏移。 图如前图所示；
使用相对位置和绝对位置的定位边距偏移
结合父级相对对齐、子级绝对对齐，top/left/right/bottom均为0进行上下左右拉伸。 希望通过margin为auto的约束因素到父级中心。 具体来说，让我们看看代码：
. parent{ position: relative； }.child{ position: absolute； top: 0； left: 0； right: 0； bottom: 0； 边距：自动； (使用flex布局中的justify-content algn-items
如果不太了解flex布局，可以查看本文的flex布局总结。 那么，直接看看代码吧：
. parent{ display: flex； 内容：中心； align-items3360中心； 结语关于水平中心、垂直中心、水平垂直中心的方法总结到此为止，可见方法都是万无一失其宗，总体上几乎相同。 那么，如果有错误的话，欢迎指出来。 重要的项链就交给大家了~