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

时间：2011-04-18 13:22:47

标签： html css

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

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

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

有什么想法吗？

28 个答案:

答案 0 :(得分：1129)

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

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

就是这样。如果它可以是多行，那么它会更复杂一些。但http://pmob.co.uk/上有解决方案寻找“垂直对齐”。

因为它们往往是黑客攻击或添加复杂的div ...我通常会使用带有单个单元格的表来执行此操作...以使其尽可能简单。

2016/2017年更新：

使用transform可以更常见，即使在IE10和IE11等旧版浏览器中也能正常运行。它可以支持多行文本：

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，但它没有得到广泛的支持，因为它会在某些旧版IE中破坏，例如IE10。

答案 1 :(得分：417)

截至2014年的常用技术：

  • 方法1 - transform translateX / translateY：

    Example Here / Full Screen Example

    在supported browsers（大多数）中，您可以将top: 50% / left: 50%与translateX(-50%) translateY(-50%)结合使用，动态地垂直/水平居中元素。

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

  • 方法2 - Flexbox方法：

    Example Here / Full Screen Example

    在supported browsers中，将目标元素的display设置为flex，并使用align-items: center进行垂直居中，justify-content: center进行水平居中。不要忘记添加供应商前缀以获得额外的浏览器支持（see example）。

    html, body, .container {
    height: 100%;
}
.container {
    display: flex;
    align-items: center;
    justify-content: center;
}

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

    Example Here / Full Screen Example

    在某些情况下，您需要确保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%位移：

    Example Here / Full Screen Example

    此方法假定文本具有已知高度 - 在本例中为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方法（最不灵活 - 未建议）：

    Example Here

    在某些情况下，父元素将具有固定的高度。对于垂直居中，您所要做的就是在子元素上设置line-height值，使其等于父元素的固定高度。

    虽然此解决方案在某些情况下有效，但值得注意的是，当有多行文字时，它无法正常工作 - like this。

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

方法4和5不是最可靠的。选择前3个中的一个。

答案 2 :(得分：59)

使用flexbox / CSS：

 buildTypes {
    release {
     // minifyEnabled true

    }
}

CSS：

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

取自Quick Tip: The Simplest Way To Center Elements Vertically And Horizontally

答案 3 :(得分：25)

将行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
}

答案 4 :(得分：14)

我总是使用以下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 :(得分：13)

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

  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>

codpen link http://codepen.io/santoshkhalse/pen/xRmZwr

答案 6 :(得分：11)

将此css类提供给目标

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

答案 7 :(得分：8)

方法1

＆＃13;
＆＃13; 
div {
  height: 90px;
  line-height: 90px;
  text-align: center;
  border: 2px dashed #f69c55;
}
＆＃13; 
<div>
  Hello World!
</div>
＆＃13;
＆＃13;
＆＃13;

方法2

＆＃13;
＆＃13; 
div {
  height: 200px;
  line-height: 200px;
  text-align: center;
  border: 2px dashed #f69c55;
}
span {
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

方法3

＆＃13;
＆＃13; 
div {
  display: table;
  height: 100px;
  width: 100%;
  text-align: center;
  border: 2px dashed #f69c55;
}
span {
  display: table-cell;
  vertical-align: middle;
}
＆＃13; 
<div>
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 8 :(得分：6)

最佳方法之一是在父div处使用flex属性，并向其中添加margin：auto属性 元素标签

.parent{
    display: flex;
    flex-direction: column;
    flex: 1;
    height:100%;
}

p{
    margin:auto;
}

答案 9 :(得分：4)

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

答案 10 :(得分：4)

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

答案 11 :(得分：4)

GRID 

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


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

.box {
    width: 200px;
    height: 100px;
    background: red;
}
<div class="box center">My text</div>

答案 12 :(得分：2)

在父div中添加以下代码

 display: grid;
 place-items: center;

答案 13 :(得分：2)

2020年方式 

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

答案 14 :(得分：2)

div {
  height: 90px;
  line-height: 90px;
  text-align: center;
  border: 2px dashed #f69c55;
}
<div>
  Hello World!
</div>

答案 15 :(得分：1)

您可以尝试以下方法：

1。如果你有一个单词或一个句子，那么下面的代码可以解决问题。

在div标签内部添加文本并为其指定ID。为该id定义以下属性。

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

注意：确保line-height属性与除法的高度相同。

Image

但是，如果内容不止一个单词或一行，那么这不起作用。此外，有时您无法在px或％中指定divison的大小。（当divison非常小并且您希望内容完全位于中间时）

2. 要解决此问题，我们可以尝试以下属性组合。 

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

Image

这3行代码将内容准确地设置在分区的中间（与显示器的大小无关）。 ＆＃34; align-items：center＆＃34; 有助于垂直居中，而＆＃34; justify-content：center＆＃34; 会使其水平居中。

注意： Flex不适用于所有浏览器。确保添加适当的供应商前缀以获得其他浏览器支持。

答案 16 :(得分：1)

＆＃13;
＆＃13; 
.cell-row {display: table; width: 100%; height: 100px; background-color: lightgrey; text-align: center}
.cell {display: table-cell}
.cell-middle {vertical-align: middle}
＆＃13; 
<div class="cell-row">
  <div class="cell cell-middle">Center</div>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 17 :(得分：1)

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

答案 18 :(得分：1)

这对我有用（测试好了！）

HTML：

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

的CSS：

#include <iostream>
#include <string>
#include <list>
//#include <iterator>
//#include <functional>
#include <algorithm>
using namespace std;

class Project
{
private:
    string name;
    int days;
public:
    Project(string n, int d)
    {
        name = n;
        days = d;
    }
    int get_days() const
    {
        return days;
    }

    void show() const
    {
        cout << "Name of the project: " << name << endl;
        cout << "Days to completion: " << days << endl;
        cout << endl;
    }
};
static bool sortByAge(const Project &lhs, const Project &rhs) 
{ 
    return lhs.get_days() < rhs.get_days(); 
}
int main()
{
    list<Project> l1, l2;
    Project ob1("Alpha", 120), ob3("Gama", 60), ob5("Omega", 200);
    l1.push_back(ob1);
    l1.push_back(ob3);
    l1.push_back(ob5);
    sort(l1.begin(), l1.end(), sortByAge);
    cout << "LIST 1" << endl;
    for (const auto& p : l1)
    {
        p.show();
    }
system("pause");
}

您可以选择其他值，然后选择50％fi。 25％以家长的25％为中心

答案 19 :(得分：0)

申请风格：

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

无论篇幅如何，你的文本都会居中。

答案 20 :(得分：0)

这对我有用

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

答案 21 :(得分：0)

<!DOCTYPE html>
<html>
  <head>
    <style>
      .container{
        height:450px;
        background:#f8f8f8;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-align: center;
        justify-content: center;
        width: 100%;
      }
      p{
      font-size:24px;}
    </style>
  </head>
  <body>
    <div class="container">
      <p>hello world</p>
    </div>
  </body>
</html>

答案 22 :(得分：0)

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

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%);
}

答案 23 :(得分：0)

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

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

答案 24 :(得分：0)

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

line-height: 90px;

答案 25 :(得分：-1)

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

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

答案 26 :(得分：-1)

对我来说很简单的代码！仅一行，您的文本将水平居中。 

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

输出看起来像这样：

请投票给这个答案，如果它只是为了节省一些开发人员寻找简单解决方案的时间。谢谢！ ：）

答案 27 :(得分：-2)

org.jasypt.exceptions.EncryptionOperationNotPossibleException: null
    at org.jasypt.encryption.pbe.StandardPBEByteEncryptor.decrypt(StandardPBEByteEncryptor.java:1055) ~[jasypt-1.9.2.jar:na]
    at org.jasypt.encryption.pbe.StandardPBEStringEncryptor.decrypt(StandardPBEStringEncryptor.java:725) ~[jasypt-1.9.2.jar:na]
    at org.jasypt.encryption.pbe.PooledPBEStringEncryptor.decrypt(PooledPBEStringEncryptor.java:498) ~[jasypt-1.9.2.jar:na]
    at com.platform.core.config.PlatformEncryptionConfiguration$MyEncryptablePropertyResolver.resolvePropertyValue(PlatformEncryptionConfiguration.java:51) ~[classes/:na]
    at com.ulisesbocchio.jasyptspringboot.resolver.DefaultLazyPropertyResolver.resolvePropertyValue(DefaultLazyPropertyResolver.java:41) ~[jasypt-spring-boot-2.0.0.jar:na]
    at com.ulisesbocchio.jasyptspringboot.EncryptablePropertySource.getProperty(EncryptablePropertySource.java:16) ~[jasypt-spring-boot-2.0.0.jar:na]
    at com.ulisesbocchio.jasyptspringboot.wrapper.EncryptableMapPropertySourceWrapper.getProperty(EncryptableMapPropertySourceWrapper.java:29) ~[jasypt-spring-boot-2.0.0.jar:na]
    at org.springframework.core.env.CompositePropertySource.getProperty(CompositePropertySource.java:59) ~[spring-core-4.3.11.RELEASE.jar:4.3.11.RELEASE]
    at org.springframework.cloud.bootstrap.BootstrapApplicationListener$ExtendedDefaultPropertySource.getProperty(BootstrapApplicationListener.java:430) ~[spring-cloud-context-1.3.0.RELEASE.jar:1.3.0.RELEASE]
    at com.ulisesbocchio.jasyptspringboot.EncryptablePropertySource.getProperty(EncryptablePropertySource.java:13) ~[jasypt-spring-boot-2.0.0.jar:na]
    at com.ulisesbocchio.jasyptspringboot.wrapper.EncryptableMapPropertySourceWrapper.getProperty(EncryptableMapPropertySourceWrapper.java:29) ~[jasypt-spring-boot-2.0.0.jar:na]
    at org.springframework.boot.bind.PropertySourcesPropertyValues.getEnumerableProperty(PropertySourcesPropertyValues.java:165) ~[spring-boot-1.5.7.RELEASE.jar:1.5.7.RELEASE]
    at org.springframework.boot.bind.PropertySourcesPropertyValues.processEnumerablePropertySource(PropertySourcesPropertyValues.java:148) ~[spring-boot-1.5.7.RELEASE.jar:1.5.7.RELEASE]
    at org.springframework.boot.bind.PropertySourcesPropertyValues.processPropertySource(PropertySourcesPropertyValues.java:127) ~[spring-boot-1.5.7.RELEASE.jar:1.5.7.RELEASE]
    at org.springframework.boot.bind.PropertySourcesPropertyValues.<init>(PropertySourcesPropertyValues.java:117) ~[spring-boot-1.5.7.RELEASE.jar:1.5.7.RELEASE]
    at org.springframework.boot.bind.PropertySourcesPropertyValues.<init>(PropertySourcesPropertyValues.java:78) ~[spring-boot-1.5.7.RELEASE.jar:1.5.7.RELEASE]
    at org.springframework.boot.bind.PropertySourcesPropertyValues.<init>(PropertySourcesPropertyValues.java:66) ~[spring-boot-1.5.7.RELEASE.jar:1.5.7.RELEASE]
    at org.springframework.cloud.client.HostInfoEnvironmentPostProcessor.getFirstNonLoopbackHostInfo(HostInfoEnvironmentPostProcessor.java:47) ~[spring-cloud-commons-1.3.0.RELEASE.jar:1.3.0.RELEASE]
    at org.springframework.cloud.client.HostInfoEnvironmentPostProcessor.postProcessEnvironment(HostInfoEnvironmentPostProcessor.java:34) ~[spring-cloud-commons-1.3.0.RELEASE.jar:1.3.0.RELEASE]
    at org.springframework.boot.context.config.ConfigFileApplicationListener.onApplicationEnvironmentPreparedEvent(ConfigFileApplicationListener.java:182) ~[spring-boot-1.5.7.RELEASE.jar:1.5.7.RELEASE]
    at org.springframework.boot.context.config.ConfigFileApplicationListener.onApplicationEvent(ConfigFileApplicationListener.java:168) ~[spring-boot-1.5.7.RELEASE.jar:1.5.7.RELEASE]
    at org.springframework.context.event.SimpleApplicationEventMulticaster.doInvokeListener(SimpleApplicationEventMulticaster.java:172) ~[spring-context-4.3.11.RELEASE.jar:4.3.11.RELEASE]
    at org.springframework.context.event.SimpleApplicationEventMulticaster.invokeListener(SimpleApplicationEventMulticaster.java:165) ~[spring-context-4.3.11.RELEASE.jar:4.3.11.RELEASE]
相关问题
最新问题