当前位置: 代码迷 >> 综合 >> 7、用css2和css3分别实现垂直居中和水平居中
  详细解决方案

7、用css2和css3分别实现垂直居中和水平居中

热度:39   发布时间:2023-10-27 13:27:38.0

css2:

水平居中:
text-align: center;(水平)
margin: 0 auto;(水平)垂直居中:
单行内容垂直居中设置相同的height和line-height
多行内容垂直居中通过设置上下的padding
vertical-align:center;(垂直居中)绝对定位实现水平垂直居中:
top:50%;
left:50%;
transform: translateX(-50%);
transform: translateY(-50%);

css3:

display: flex;
justify-content: center;
align-items: center;