css垂直居中

阅读 218

2022-02-15

一、只适用于高度固定的情况

line-height:设置值为整个元素的高度
padding:根据元素高度,设置具体的padding
margin:根据元素高度,设置具体的margin

二、元素内容/高度不固定
方法一:flex

{ 
    display: flex;
    align-items: center;  // 垂直居中
    justify-content: center;   // 横向居中
}

方法二:浮动

父元素:{ position: relative;}
子元素:{ position: absolute; top: 50%; transform: translate(50%, -50%); }

方法三:table-cell

{ display: table-cell; vertical-align: middle; }

精彩评论(0)

0 0 举报