div块内的CSS中心文本（水平和垂直）

最新推荐文章于 2024-03-06 20:28:35 发布

asdfgh0077

最新推荐文章于 2024-03-06 20:28:35 发布

阅读量414

点赞数 1

文章标签： html css

原文链接：https://stackoom.com/question/Nvkm/div块内的CSS中心文本-水平和垂直

版权

这篇博客介绍了多种方法使文本在div内实现水平和垂直居中对齐，包括使用display: table-cell, flexbox, position: absolute等技术，并提供了相应的CSS代码示例和更新，以适应不同浏览器的兼容性需求。" 89026981,8313788,Spark与Alluxio性能优化：十大实战技巧,"['大数据', 'Spark', 'Alluxio', '数据缓存', '性能优化']

摘要由CSDN通过智能技术生成

我将div设置为display:block （ height和width 90px ），并且里面有一些文本。

我需要文本在垂直和水平方向上居中对齐。

我尝试了text-align:center ，但是它没有做水平部分，所以我尝试了vertical-align:middle ，但是没有用。

有任何想法吗？

#1楼

调整线高以获得垂直对齐。

line-height: 90px;

#2楼

截至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-Flexbox方法：
此处示例 / 全屏示例
在支持的浏览器中，将目标元素的display设置为flex并使用align-items: center进行垂直居中， justify-content: center进行水平居中。只是不要忘记为其他浏览器支持添加供应商前缀（请参阅示例）。
```
 html, body, .container { height: 100%; } .container { display: flex; align-items: center; justify-content: center; } 
```

方法3- table-cell / vertical-align: middle ：
此处示例 / 全屏示例
在某些情况下，您需要确保html / body元素的高度设置为100% 。
对于垂直对齐，将父元素的width / height为100%然后添加display: table 。然后，对于子元素，将display更改为table-cell并添加vertical-align: middle 。
对于水平居中，可以添加text-align: center以使文本和任何其他inline子元素居中。另外，您可以使用margin: 0 auto假设元素为block级。
```
 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% 。使用负margin-top限值负值，该值是元素已知高度的一半，在这种情况下为-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- line-height方法（最不灵活-不建议）：
这里的例子
在某些情况下，父元素将具有固定的高度。对于垂直居中，您要做的就是在子元素上将line-height值设置为等于父元素的固定高度。
尽管此解决方案在某些情况下可以使用，但值得注意的是，当有多行文本（例如this）时，该解决方案将无法使用。
```
 .parent { height: 200px; width: 400px; text-align: center; } .parent > .child { line-height: 200px; } 
```

方法4和5并不是最可靠的。选择前三个之一。

#3楼

# 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
}

#4楼

我始终对容器使用以下CSS，以使其内容水平和垂直居中。

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;

在此处查看其运行情况： https : //jsfiddle.net/yp1gusn7/

#5楼

使用flexbox / CSS：

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

CSS：

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

摘自快速提示：垂直和水平居中对齐元素的最简单方法

#6楼

<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>

#7楼

这应该是正确的答案。最干净，最简单：

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

#8楼

这对我有用（测试确定！）：

HTML：

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

CSS：

.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 */
}

您可以选择50％以外的其他值。例如，以25％为中心，以25％的父母为中心。

#9楼

您可以为此尝试非常简单的代码：

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

 .box{ height: 90px; width: 90px; background: green; display: flex; align-items: center; justify-content: center; }

 <div class="box"> Lorem </div>

Codepen链接： http ：//codepen.io/santoshkhalse/pen/xRmZwr

#10楼

<!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>

#11楼

您可以尝试以下方法：

如果您只有一个单词或一个单行句子，那么以下代码可以解决问题。
在div标签内添加文本，并为其指定ID。为该ID定义以下属性。
```
 id-name { height: 90px; line-height: 90px; text-align: center; border: 2px dashed red; } 
```
注意：确保line-height属性与分隔的高度相同。
图片
但是，如果内容不止一个单词或一行，那么这将不起作用。此外，有时您无法指定像素大小（以px或％为单位）（当分隔的确很小且您希望内容恰好在中间时）。
要解决此问题，我们可以尝试以下属性组合。
```
 id-name { display: flex; justify-content: center; align-items: center; border: 2px dashed red; } 
```
图片
这三行代码将内容精确地设置在一个分区的中间（与显示大小无关）。 “对齐项目：居中”有助于垂直居中，而“调整内容：居中”将使其居中居中。
注意： Flex不适用于所有浏览器。确保为其他浏览器支持添加适当的供应商前缀。

#12楼

套用样式：

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

您的文本将居中，而不考虑其长度。

#13楼

方法1

 div { height: 90px; line-height: 90px; text-align: center; border: 2px dashed #f69c55; }

 <div> Hello, World!! </div>

方法2

 div { height: 200px; line-height: 200px; text-align: center; border: 2px dashed #f69c55; } span { display: inline-block; vertical-align: middle; line-height: normal; }

 <div> <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Haec et tu ita posuisti, et verba vestra sunt. Non enim iam stirpis bonum quaeret, sed animalis. </span> </div>

方法3

 div { display: table; height: 100px; width: 100%; text-align: center; border: 2px dashed #f69c55; } span { display: table-cell; vertical-align: middle; }

 <div> <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span> </div>

#14楼

将此CSS类提供给目标<div>：

 .centered { width: 150px; height: 150px; display: flex; align-items: center; justify-content: center; text-align: center; background: red; /* Not necessary just to see the result clearly */ }

 <div class="centered">This text is centered horizontally and vertically</div>

#15楼

 .cell-row {display: table; width: 100%; height: 100px; background-color: lightgrey; text-align: center} .cell {display: table-cell} .cell-middle {vertical-align: middle}

 <div class="cell-row"> <div class="cell cell-middle">Center</div> </div>

#16楼

这为我工作：

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

#17楼

 div { height: 90px; line-height: 90px; text-align: center; border: 2px dashed #f69c55; }

 <div> Hello, World!! </div>

#18楼

您可以在父 div处使用flex属性，并将margin:auto属性添加到子项：

.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;
}

您可以在此处查看flex更多选项： https : //css-tricks.com/snippets/css/a-guide-to-flexbox/

#19楼

请尝试以下示例。我为每个类别添加了示例：水平和垂直

<!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>

#20楼

<!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>

#21楼

添加行display: table-cell; 到该div的CSS内容。

只有表格单元格支持vertical-align: middle; ，但您可以将[table-cell]定义赋予div ...

一个实时示例在这里： http : //jsfiddle.net/tH2cc/

div{
    height: 90px;
    width: 90px;
    text-align: center;
    border: 1px solid silver;
    display: table-cell; // This says treat this element like a table cell
    vertical-align:middle; // Now we can center vertically like in a TD
}

#22楼

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

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

而已。如果可以是多行，那么它会稍微复杂一些。但是在http://pmob.co.uk/上有解决方案。查找“垂直对齐”。

由于它们往往是黑客或添加复杂的div ...我通常使用带有单个单元格的表来实现它...使其尽可能简单。

2016年/ 2017年更新：

它通常可以通过transform来完成，即使在较旧的浏览器（例如Internet Explorer 10和Internet Explorer 11）中也可以很好地工作。它可以支持多行文本：

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

示例： https ： //jsfiddle.net/wb8u02kL/1/

收缩包装宽度：

上面的解决方案为内容区域使用了固定的宽度。要使用收缩包装的宽度，请使用

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

示例： https ： //jsfiddle.net/wb8u02kL/2/

我尝试了flexbox，但是它没有得到广泛的支持，因为它在某些旧版本的Internet Explorer（例如Internet Explorer 10）中会损坏。

#23楼

对我来说，这是最好的解决方案：

HTML：

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

CSS：

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

asdfgh0077

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

div块内的CSS中心文本（水平和垂直）

#1楼

#2楼

截至2014年的常用技术：

方法1- `transform` `translateX` / `translateY` ：

方法2-Flexbox方法：

方法3- `table-cell` / `vertical-align: middle` ：

方法4-绝对从顶部移至顶部`50%` ：

方法5- `line-height`方法（最不灵活-不建议）：

#3楼

#4楼

#5楼

#6楼

#7楼

#8楼

#9楼

#10楼

#11楼

#12楼

#13楼

方法1

方法2

方法3

#14楼

#15楼

#16楼

#17楼

#18楼

#19楼

#20楼

#21楼

#22楼

2016年/ 2017年更新：

收缩包装宽度：

#23楼

div块内的CSS中心文本（水平和垂直）

#1楼

#2楼

截至2014年的常用技术：

方法1- transform translateX / translateY ：

方法2-Flexbox方法：

方法3- table-cell / vertical-align: middle ：

方法4-绝对从顶部移至顶部50% ：

方法5- line-height方法（最不灵活-不建议）：

#3楼

#4楼

#5楼

#6楼

#7楼

#8楼

#9楼

#10楼

#11楼

#12楼

#13楼

方法1

方法2

方法3

#14楼

#15楼

#16楼

#17楼

#18楼

#19楼

#20楼

#21楼

#22楼

2016年/ 2017年更新：

收缩包装宽度：

#23楼

方法1- `transform` `translateX` / `translateY` ：

方法3- `table-cell` / `vertical-align: middle` ：

方法4-绝对从顶部移至顶部`50%` ：

方法5- `line-height`方法（最不灵活-不建议）：