10.元素水平垂直居中方法

书诚小驿2025/02/25前端面经Html

元素水平垂直居中方法

1）父元素设置 display:flex; justify-content:center; align-items:center; 2）元素 position:absolute；left/top 设为 50%；margin-left/margin-top 设为元素自身宽高一半的负值或者 transform 设为 translate(-50%,-50%) ps.margin 需要显示设置 width 和 height 3）自适应居中。元素 position:absolute；left/right/top/bottom 设为 0；margin:auto; 4）父元素 display:table-cell; text-align:center; vertical-align:middle; 子元素 display:inline-block;