tft每日頭條

 > 生活

 > 怎樣使一個元素絕對居中

怎樣使一個元素絕對居中

生活 更新时间:2024-07-28 14:12:28

怎樣使一個元素絕對居中(元素水平垂直居中的方式有哪些)1

元素水平垂直居中的方式有哪些?

  • absolute加margin方案
  • fixed 加 margin 方案
  • display:table 方案
  • 行内元素line-height方案
  • flex 彈性布局方案
  • transform 未知元素寬高解決方案

absolute加margin方案

div{ position: absolute; width: 100px; height: 100px; left: 50%; top: 50%: margin-top: -50px; margin-left: -50px; }

fixed 加 margin 方案

div{ position: fixed; width: 100px; height: 100px; top: 0; right:0; left: 0; bottom: 0; margin: auto; }

display:table 方案

div{ display: table-cell; vertical-align: middle; text-align: center; width: 100px; height: 100px; }

行内元素line-height方案

div{ text-align: center; line-height: 100px; }

flex 彈性布局方案

div{ display: flex; align-items: center; justify-content:center }

transform 未知元素寬高解決方案

div{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) }

,

更多精彩资讯请关注tft每日頭條,我们将持续为您更新最新资讯!

查看全部

相关生活资讯推荐

热门生活资讯推荐

网友关注

Copyright 2023-2024 - www.tftnews.com All Rights Reserved