我有一个包含文本的<div>元素,我想将这个<div>的内容垂直居中对齐。

这是我的<div>风格:

#盒子{高度:170px;宽度:270px;背景:#000;字体大小:48px;颜色:#FFF;文本对齐:居中;}<div id=“box”>Lorem ipsum悲哀坐</div>

实现这一目标的最佳方式是什么?


当前回答

您可以在CSS中使用定位方法:

检查此处的结果。。。。

HTML格式:

<div class="relativediv">
  <p>
    Make me vertical align as center
  </p>
</div>

CSS:

.relativediv {
    position: relative;
    border: 1px solid #DDD;
    height: 300px;
    width: 300px
}
.relativediv p {
    position: absolute;
    top: 50%;
    transfrom: translateY(-50%);
}

其他回答

这是使用Flexbox的另一个选项。

#集装箱{显示:柔性;高度:200px;背景:橙色;}.儿童{边距:自动;}<div id=“container”><div class=“child”><span>Lorem ipsum dolor坐在amet consectetur adipiscing elit。鼹鼠,尼莫</span></div></div>

后果

这里有一篇关于CSS居中的好文章。过来看。

较新的浏览器现在支持CSS calc功能。如果您针对的是这些浏览器,您可能需要考虑这样做:

<div style=“位置:相对;宽度:400px;高度:400px,背景色:红色”><span style=“位置:绝对;行高:40px;高度:80px;文本对齐:居中;宽度:300px;溢出:隐藏;顶部:计算(50%-40px);左侧:计算(50%-150px);”>这里有两条线,即使父div改变大小,也会居中。</span></div>

关键是在绝对或相对定位的父除法中使用style=“top:calc(50%-[inerFixedHeightInPX/2]px);height:[inerFixed HeightInPX;”。

绝对定位和拉伸

与上面的方法一样,首先将父元素和子元素上的位置分别设置为相对和绝对。从那里情况就不同了。

在下面的代码中,我再次使用了该方法来水平和垂直地居中子对象,尽管您只能使用该方法进行垂直居中。

HTML

<div id="parent">
    <div id="child">Content here</div>
</div>

CSS

#parent {position: relative;}
#child {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 50%;
    height: 30%;
    margin: auto;
}

此方法的思想是通过将上、下、右和左值设置为0,尝试使子元素延伸到所有四条边。因为我们的子元素比我们的父元素小,所以它不能到达所有的四条边。

然而,将自动设置为所有四边的边距会导致相反的边距相等,并将子div显示在父div的中心。

不幸的是,上面的方法在InternetExplorer7及以下版本中不起作用,并且像前面的方法一样,子div中的内容可能会变得太大,导致其被隐藏。

CSS3柔性接线盒有一个小小的魔力:

/*重要*/部分{显示:柔性;显示:-webkit flex;}第p节{/*关键部件*/边距:自动;}/*不重要,着色和UI*/部分{高度:200px;宽度:60%;边距:自动;边框半径:20px;边框:3px实心橙色;背景色:金色;}第p节{文本对齐:居中;font-family:Cantarell,Calibri;字体大小:15px;背景色:黄色;边框半径:20px;填充:15px;}<章节><p>我是一个居中的盒子<br/>Flexbox很棒!</p></section>

提示:如果要将文本居中,请将上面标记为“关键部件”的行替换为以下行之一:

仅垂直:边距:自动0;仅水平:边距:0自动;

正如我注意到的,这个技巧也适用于网格(即display:grid)。

简单而通用的方法是表格方法):

[ctrv]{
    display: table !important;
}

[ctrv] > *{ /* Addressing direct descendants */
      display: table-cell;
      vertical-align: middle;
      // text-align: center; /* Optional */
}

在父标记上使用此属性(或等效的类)甚至可以使许多子标记对齐:

<parent ctrv>  <ch1/>  <ch2/>   </parent>