css居中布局

一、行内元素居中

• 水平居中：设置父元素文本对齐方式为居中(taxt-align: center;)
• 垂直居中：设置父元素的行高等于容器高度 (line-height: 100%;)
• 水平垂直居中：水平居中+垂直居中

<style>
.ta-center{
    text-align: center;
}
.lhh-block{
    line-height: 60px;
}
</style>
<div class="lhh-block center">
   <span>行内元素水平垂直居中</span>
</div>

二、块级元素居中

• 水平居中 ：设置左右外边距为自适应(margin: 0 auto)
• 水平垂直居中（固定高度）：绝对定位 + margin负值

<style>
.parent{
    position: relative;
    height: 100px;
    border: 1px solid #333;
}
.block{
    width: 200px;
    height: 60px;
    line-height: 60px;
    text-align: center;
    position: absolute;
    top: 50%;
    right: 50%;
    margin-top: -30px;
    margin-right: -100px;
    border: 1px solid #ccc;
}
</style>
<div class="parent">
   <div class="block">块级元素水平垂直居中</span>
</div>

• 水平垂直居中（自适应高度）：绝对定位+transform

<style>
.parent1{
    position: relative;
    height: 100px;
    border: 1px solid #333;
}
.block1{
    width: 200px;
    height: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 1px solid #ccc;
}
</style>
<div class="parent1">
   <div class="block1">块级元素水平垂直居中</span>
</div>

三、Flexible Box弹性布局-简称flex