【Effective Web】常见的css居中方式
CSS居中方式
水平居中
text-align:center
适用范围：容器中都是行内元素
缺点：容器内所有元素都会居中，如果是文本描述需要左对齐，需要增加text-align:left覆盖
margin: 0 auto
适用范围：容器宽度固定。子元素宽度固定
缺点：对上下居中不适用
垂直居中
借助table-cell的垂直居中
给容器加上
{display: table-cell;vertical-align: middle;
}
缺点：margin属性失效
相对定位
父相子绝，原理是子元素相对父容器先向右向下偏移父容器的50%，再向左向上偏移子元素的50%
父容器position属性为relative，子元素加上以下样式
{position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);
}
适用范围：父子元素宽度高度固定，且子元素只有一个
缺点：如果子元素是文本，可能会导致换行
flex布局
容器加上
{display: flex;align-items: center;justify-content: center;
}
行内元素的垂直居中
html如下:
<div class="container"><img src="../img/Karen-Pape-1800x1200.webp" alt="" /><span>湖泊</span></div>
改变元素的居中方式，设置行高与容器高度一致
img,span {vertical-align: middle;line-height: 500px;}
缺点：需要改变行高
多行文本的垂直居中
给文本增加span，设置span为inline-block,容器本身height与line-height相等
.container {height: 500px;line-height: 500px;
}.container {span {display: inline-block;line-height: normal;vertical-align: middle;margin: 0 20px;}}