水平垂直居中对齐div元素或文本的五种方法
第一种方法：使用top: 50%/left: 50%和translatex(-50% ) translatey(-50% )； 具体代码如下。
. container {
位置： absolute；
top: 50%；
left: 50%；
transform:translatex(-50% ) translatey(-50%；
}
实例：
如何水平垂直居中对齐元素或文本。 容器{
位置： absolute；
top: 50%；
left: 50%；
transform:translatex(-50% ) translatey(-50%；
}
水平垂直居中对齐文本
经常迟到的百合：使用display :福克斯； align-items3360中心； justify-content: center； 属性
html，body， container {
height: 100%；
}
. container {
显示： Flex；
align-items3360中心；
justify-content: center；
}
实例：
html，body， container {
height: 100%；
}
. container {
显示： Flex；
align-items3360中心；
justify-content: center；
}
水平垂直居中对齐文本
方法3 :使用table-cell/vertical-align : middle
html，body {
height: 100%；
}
. parent {
width: 100%；
height: 100%；
显示：表；
文本对齐3360中心；
}
. parent .child {
display :表蜂窝；
垂直对准：米；
}
实例：
将元素或文本转换为html，body {
height: 100%；
}
. parent {
width: 100%；
height: 100%；
显示：表；
文本对齐3360中心；
}
. parent .child {
display :表蜂窝；
垂直对准：米；
} justify-content: center；
如何水平垂直居中对齐元素或文本line-height
. parent {
高： 200 px；
width: 400px；
文本对齐3360中心；
}
. parent .child {
line-height: 200px；
}
实例：
如何水平垂直居中对齐元素或文本。 parent {
高： 200 px；
width: 400px；
文本对齐3360中心；
后台： red；
}
. parent .child {
line-height: 200px；
}
如何水平垂直居中对齐元素或文本