Fatal编程技术网
  • html/
  • Html 如何在div块中居中放置文本（水平和垂直）？

Html 如何在div块中居中放置文本（水平和垂直）？

html css

Html 如何在div块中居中放置文本（水平和垂直）？,html,css,Html,Css,我有一个div设置为display:block（90px高度和宽度），里面有一些文本 我需要文本在垂直和水平方向的中心对齐 .center-horizontally{ justify-content: center; } <Card.Footer className="card-body-padding center-horizontally"> <label className="support-expand-text-light&qu

我有一个
div
设置为
display:block
（
90px
高度
和
宽度
），里面有一些文本

我需要文本在垂直和水平方向的中心对齐

.center-horizontally{
  justify-content: center;
}

<Card.Footer className="card-body-padding center-horizontally">
  <label className="support-expand-text-light">Call or email Customer Support to change</label>
</Card.Footer>
我已经尝试了
文本对齐：居中
，但它不执行水平部分，所以我尝试了
垂直对齐：居中
，但它不起作用

有什么想法吗？

添加行
显示：表格单元格
添加到该div的CSS内容

只有表格单元格支持
垂直对齐：中间，但您可以将该[table cell]定义赋予div

下面是一个活生生的例子：


如果是一行文本和/或图像，那么很容易做到。只需使用：


text-align: center;
vertical-align: middle;
line-height: 90px;       /* The same as your div height */


就这样。如果它可以是多行，那么它就有点复杂了。但我们有解决办法。寻找“垂直对齐”

因为他们往往是黑客或添加复杂的div。。。我通常用一个有一个单元格的表格来做。。。使它尽可能简单



2020年更新：
除非您需要使其在早期浏览器（如Internet Explorer 10）上工作，否则您可以使用flexbox。它是。基本上，容器需要指定为柔性容器，并沿其主轴和横轴居中：


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


要指定子项的固定宽度（称为“弹性项”），请执行以下操作：

例如：

要对内容进行收缩包装，则更简单：只需从flex项中删除
flex:…
行，它就会自动进行收缩包装

例如：

以上示例已经在主要浏览器上进行了测试，包括MS Edge和Internet Explorer 11

如果您需要自定义它，请注意一点：在flex项内部，因为此flex项本身不是flex容器，所以CSS的旧的非flexbox方式可以按预期工作。但是，如果向当前flex容器中添加其他flex项，则这两个flex项将水平放置。要使它们垂直放置，请添加
flex-direction:列到flex容器。这就是它在flex容器及其立即子元素之间的工作方式

还有另一种居中方法：不为柔性容器的主轴和横轴上的分配指定
中心
，而是在柔性项目上指定
边距：自动
，以在所有四个方向上占用所有额外空间，而均匀分布的边距将使flex项在所有方向居中。除非存在多个弹性项，否则此选项有效。此外，此技术在MS Edge上有效，但在Internet Explorer 11上无效



2016/2017年更新：
更常见的方法是使用
transform
，甚至在InternetExplorer10和InternetExplorer11等较旧的浏览器中也能很好地工作。它可以支持多行文本：


position: relative;
top: 50%;
transform: translateY(-50%);


例如：

要收缩包裹宽度，请执行以下操作：
上面的解决方案为内容区域使用了固定的宽度。要使用收缩包装宽度，请使用


position: relative;
float: left;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);


例如：


如果需要对InternetExplorer10的支持，那么flexbox将不起作用，上述方法和
行高
方法将起作用。否则，flexbox将完成此工作。
调整线高度以获得垂直对齐


line-height: 90px;


截至2014年的常用技术：



    

  • 方法1-
    transform
    translateX
    /
    translateY
    ：
/
    
在（大多数）中，您可以使用
    top:50%
    /
    left:50%
    与
    translateX（-50%）translateY（-50%）
    组合使用来动态地垂直/水平居中元素
    

    .container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}

    

    • 





    

  • 方法2-柔性箱法：
/
    
在中，将目标元素的
    显示设置为
    flex
    ，并使用
    align items:center
    进行垂直居中，使用
    justify content:center
    进行水平居中。只是别忘了添加供应商前缀以获得额外的浏览器支持（）
    

    • 





    

  • 方法3-
    表格单元格
    /
    垂直对齐：中间
    ：
/
    
在某些情况下，您需要确保
    html
    /
    body
    元素的高度设置为
    100%
    
对于垂直对齐，将父元素的
    宽度
    /
    高度
    设置为
    100%
    ，并添加
    显示：表格
    。然后，对于子元素，将
    显示
    更改为
    表格单元格
    ，并添加
    垂直对齐：中间
    
对于水平居中，可以添加
    text align:center
    以居中文本和任何其他
    inline
    子元素。或者，您可以使用
    margin:0 auto
    假设元素为
    block
    level
    

    html, body {
    height: 100%;
}
.parent {
    width: 100%;
    height: 100%;
    display: table;
    text-align: center;
}
.parent > .child {
    display: table-cell;
    vertical-align: middle;
}

    

    • 





    

  • 方法4-从顶部绝对定位
    50%
    ，并有位移：
/
    
这种方法假设文本有一个已知的高度——在本例中，
    18px
    。只需相对于父元素从顶部绝对定位元素
    50%
    。使用负的
    边距顶部
    值，该值为元素已知高度的一半，在本例中为-
    -9px
    

    html, body, .container {
    height: 100%;
}
.container {
    position: relative;
    text-align: center;
}
.container > p {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    margin-top: -9px;
}

    

    • 





    

  • 方法5-线高度
    方法（最不灵活-不建议）：

    
在某些情况下，父元素将具有固定的高度。对于垂直居中，您只需在子元素上设置一个与父元素的固定高度相等的
    行高度值
    
虽然这种解决方案在某些情况下会起作用，但值得注意的是，如果有多行文本-，它将不起作用
    

    • 





方法4和5不是最可靠的。使用前三种样式中的一种。
我总是使用以下CSS作为容器，以水平和垂直地将其内容居中

# Parent
{
  display:table;
}

# Child
{
  display: table-cell;
  width: 100%; // As large as its parent to center the text horizontally
  text-align: center;
  vertical-align: middle; // Vertically align this element on its parent
}



html, body, .container {
    height: 100%;
}
.container {
    position: relative;
    text-align: center;
}
.container > p {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    margin-top: -9px;
}



.parent {
    height: 200px;
    width: 400px;
    text-align: center;
}
.parent > .child {
    line-height: 200px;
}



# Parent
{
  display:table;
}

# Child
{
  display: table-cell;
  width: 100%; // As large as its parent to center the text horizontally
  text-align: center;
  vertical-align: middle; // Vertically align this element on its parent
}



display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;

-webkit-box-align: center;
-moz-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;

-webkit-box-pack: center;
-moz-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;



<div class="box">
    <p>&#x0D05;</p>
</div>



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



<div class="small-container">
    <span>Text centered</span>
</div>

<style>
.small-container {
    width:250px;
    height:250px;
    border:1px green solid;
    text-align:center;
    position: absolute;
    top: 50%;
    left: 50%;
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}
.small-container span{
    position: absolute;
    top: 50%;
    left: 50%;
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}
</style>



.element {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}



<div class="mydiv">
    <p>Item to be centered!</p>
</div>



.mydiv {
    height: 100%; /* Or other */
    position: relative;
}

.mydiv p {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%); /* To compensate own width and height */
}



  display: flex;
  align-items: center;
  justify-content: center;



<!DOCTYPE html>
<html>
  <head>
    <style>
      .maindiv {
        height: 450px;
        background: #f8f8f8;
        display: -webkit-flex;
        align-items: center;
        justify-content: center;
      }
      p {
        font-size: 24px;
      }
    </style>
  </head>

  <body>
    <div class="maindiv">
      <h1>Title</h1>
    </div>
  </body>
</html>



id-name {
  height: 90px;
  line-height: 90px;
  text-align: center;
  border: 2px dashed red;
}



id-name {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 2px dashed red;
}



position: absolute;
top: 50%;
left: 0;
right: 0;



.center-stuff{
    text-align: center;
    vertical-align: middle;
    line-height: 230px; /* This should be the div height */
}



.parent {
    display: flex;
    /* You can change this to `row` if you want the items side by side instead of stacked */
    flex-direction: column;
}

/* Change the `p` tag to what your items child items are */
.parent p {
    margin: auto;
}



<!DOCTYPE html>
<html>
    <head>
        <style>
            #horizontal
            {
                text-align: center;
            }
            #vertical
            {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translateX(-50%) translateY(-50%);
            }
         </style>
    </head>
    <body>
         <div id ="horizontal">Center horizontal text</div>
         <div id ="vertical">Center vertical text</div>
    </body>
</html> 



<!DOCTYPE html>
<html>
    <head>

    </head>
    <body>
        <div style ="text-align: center;">Center horizontal text</div>
        <div style ="position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%);">Center vertical text</div>
    </body>
</html> 



 <div id="outer">  
     <img src="logo.png">
 </div>



#outer {
  position: fixed;
  top: 50%;
  left: 50%;
  /* bring your own prefixes */
  transform: translate(-50%, -50%);
}



.center-horizontally{
  justify-content: center;
}

<Card.Footer className="card-body-padding center-horizontally">
  <label className="support-expand-text-light">Call or email Customer Support to change</label>
</Card.Footer>



.center {
    display: grid;
    justify-items: center;
    align-items: center;
}



.parent{ 
  display: grid;
  place-items: center;
}



 display: grid;
 place-items: center;