前端面试——css水平垂直居中详细讲解

 时间:2026-02-18 10:18:49

1、使用flex布局(利用flex的alignItems:center垂直居中,justifycontent:center水平居中)

前端面试——css水平垂直居中详细讲解

前端面试——css水平垂直居中详细讲解

2、利用相对定位和绝对定位的 margin:auto(相对定位下,使用绝对定位将上下左右都设置为0,再设置margin:auto即可实现居中)

前端面试——css水平垂直居中详细讲解

3、利用相对定位和绝对定位,再加上外边距和平移的配合(相对定位下,使用绝对定位,利用margin偏移外容器的50%,再利用translate平移回补自身宽高的50%即可)

前端面试——css水平垂直居中详细讲解

4、利用text-align和vertical-align,利用text-align:center实现行内元素的水平居中,再利用vertical-align:middle实现行内元素的垂直居中,前提是要先加上伪元素并给设置高度为100%,elementUI的消息弹窗居中实现方式就是如此

前端面试——css水平垂直居中详细讲解

5、父元素设置为:position: relative;子元素设置为:position: absolute;上50%,左50%,然后减去元素自身宽度的距离就可以实现

前端面试——css水平垂直居中详细讲解

  • Thinkphp模板中如何输出多张图片
  • 怎么在Word中打出上标格式
  • Visio怎么样创建灵感触发图
  • asp.net如何为网页添加音乐播放器
  • php累加运算代码
  • 热门搜索
    jeans是什么意思 寡人之疾什么意思 孰为汝多知乎的意思 洒家是什么意思 人彘是什么意思 威武的意思 lonely是什么意思 晕头转向的意思 others是什么意思 jq什么意思