当前位置: 首页 > 面试题库 >

写出div在不固定高度的情况下水平垂直居中的方法?

暴英达
2023-03-14
本文向大家介绍写出div在不固定高度的情况下水平垂直居中的方法?相关面试题,主要包含被问及写出div在不固定高度的情况下水平垂直居中的方法?时的应答技巧和注意事项,需要的朋友参考一下

我知道的有两种方法

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
 </head>
 <style>
  * {
    padding: 0;
    margin: 0;
  }
  /* flex居中 */
  .tith1 {
    display: flex;
    justify-content: center;
    align-items: center;
    background: red;
  }

  /* table居中 */
  .tith2 {
   text-align: center;
   width: 100%;
   display: table;
   background: blue;
  }
  .tith2 > span {
    display: table-cell;
    vertical-align: middle;
  }
 </style>
 <body>
  <p class="tith1">
    <span>123</span>
  </p>
  <p class="tith2">
    <span>123</span>
  </p>
 </body>
</html>
 类似资料:
  • 本文向大家介绍写出在不固定宽高的元素在固定高度的情况下水平垂直居中的方法相关面试题,主要包含被问及写出在不固定宽高的元素在固定高度的情况下水平垂直居中的方法时的应答技巧和注意事项,需要的朋友参考一下 flex布局;还有就是可以用定位也可以实现等等; flex:父div:{display:flex; justify-content: center;align-items: center;}; 定位方

  • 本文向大家介绍写出固定子容器在固定的父容器下水平垂直居中的布局相关面试题,主要包含被问及写出固定子容器在固定的父容器下水平垂直居中的布局时的应答技巧和注意事项,需要的朋友参考一下 1.父容器 position: relative,子元素 position: absolute;left: 50%;top: 50%;transform:translate3d(-50%,-50%,0). 2.父容器 d

  • 问题内容: 我弹出一个包含ASP.NET表单的弹出窗口,单击链接“请求信息”,然后出现该表单。 但是,具有链接“请求信息”以触发弹出窗口的页面包含很多内容,因此需要滚动才能看到该链接。 如果用户滚动阅读内容,则需要始终居中,否则,如果他们不滚动,弹出窗口仍将居中显示在屏幕上。 在绝对定位,整个页面宽度与边距设置为。 问题答案: 如果div具有固定的宽度和高度,请使用:(如果width = 120p

  • 问题内容: 有没有办法在 垂直和水平方向上输入一个DIV, 但这很重要, 当窗口小于内容时,内容将不会被剪切 。div必须具有背景色,宽度和高度。 我总是将div的中心定位为绝对位置和负边距,如提供的示例所示。但是它有一个问题,那就是削减内容的顶部。有没有一种方法可以将div.content居中而不会出现此问题? CSS: HTML: 我的问题不是重复的“如何在水平和垂直方向上居中放置元素?”1-

  • 问题内容: 我知道这个问题存在一百万次,但是我找不到解决方案。我有一个div,它应该固定在屏幕上,即使滚动页面,它也应该始终保持在屏幕中间! 对于所有浏览器尺寸,div应该具有宽度,应该远离顶部(页边距),应该在页面中间水平居中,并且在滚动其余页面时不应移动。 那可能吗? 问题答案:

  • 问题内容: 是否可以将 div 垂直居中于%height div中 ? 问题答案: 在这里以及整个Internet上,已经被要求足够多次了。 快速搜索将为您带来大量结果。无论如何,我这样做的首选方式是使用和。