I have a div set to display:block. (90px height and width) and I have some text inside.

I need the text to be aligned in the center both vertically and horizontally.

I have tried text-align:center, but it doesn't do the horizontal part so I tried vertical-align:middle but it didn't work.

Any ideas?

标签： html css

23条回答

余欢

2楼-- · 2018-12-31 01:08

If it is one line of text and/or image, then it is easy to do. Just use

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

that's it. If it can be multiple lines, then it is somewhat more complicated. But there are solutions on http://pmob.co.uk/ Look for "vertical align".

Since they tend to be hacks or adding complicated divs... I usually use a table with a single cell to do it... to make it as simple as possible.

Update for 2016 / 2017:

It can be more commonly done with transform, and it works well even in older browsers such as IE10 and IE11. It can support multiple lines of text:

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

example: https://jsfiddle.net/wb8u02kL/1/

To shrink wrap the width:

The solution above used a fixed width for the content area. To use a shrink wrap width, use

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

example: https://jsfiddle.net/wb8u02kL/2/

I tried flexbox, but it wasn't as widely supported, as it would break in some older version of IE such as IE10.

0人赞添加讨论(0) 举报

ら面具成の殇う

3楼-- · 2018-12-31 01:09

Adjusting line height to get the vertical alignment.

line-height: 90px;

0人赞添加讨论(0) 举报

泛滥B

4楼-- · 2018-12-31 01:10

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

0人赞添加讨论(0) 举报

不流泪的眼

5楼-- · 2018-12-31 01:12

Common techniques as of 2014:

Approach 1 - transform translateX/translateY:

Example Here / Full Screen Example

In supported browsers (most of them), you can use top: 50%/left: 50% in combination with translateX(-50%) translateY(-50%) to dynamically vertically/horizontally center the element.
```
.container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}
```

Approach 2 - Flexbox method:

Example Here / Full Screen Example

In supported browsers, set the display of the targeted element to flex and use align-items: center for vertical centering and justify-content: center for horizontal centering. Just don't forget to add vendor prefixes for additional browser support (see example).
```
html, body, .container {
    height: 100%;
}
.container {
    display: flex;
    align-items: center;
    justify-content: center;
}
```

Approach 3 - table-cell/vertical-align: middle:

Example Here / Full Screen Example

In some cases, you will need to ensure that the html/body element's height is set to 100%.

For vertical alignment, set the parent element's width/height to 100% and add display: table. Then for the child element, change the display to table-cell and add vertical-align: middle.

For horizontal centering, you could either add text-align: center to center the text and any other inline children elements. Alternatively, you could use margin: 0 auto assuming the element is block level.
```
html, body {
    height: 100%;
}
.parent {
    width: 100%;
    height: 100%;
    display: table;
    text-align: center;
}
.parent > .child {
    display: table-cell;
    vertical-align: middle;
}
```

Approach 4 - Absolutely positioned 50% from the top with displacement:

Example Here / Full Screen Example

This approach assumes that the text has a known height - in this instance, 18px. Just absolutely position the element 50% from the top, relative to the parent element. Use a negative margin-top value that is half of the element's known height, in this case - -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;
}
```

Approach 5 - The line-height method (Least flexible - not suggested):

Example Here

In some cases, the parent element will have a fixed height. For vertical centering, all you have to do is set a line-height value on the child element equal to the fixed height of the parent element.

Though this solution will work in some cases, it's worth noting that it won't work when there are multiple lines of text - like this.
```
.parent {
    height: 200px;
    width: 400px;
    text-align: center;
}
.parent > .child {
    line-height: 200px;
}
```

Methods 4 and 5 aren't the most reliable. Go with one of the first 3.

0人赞添加讨论(0) 举报

像晚风撩人

6楼-- · 2018-12-31 01:14

Approach 1

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

<div>
  Hello World!
</div>

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

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

0人赞添加讨论(0) 举报

临风纵饮

7楼-- · 2018-12-31 01:15

Using flexbox/CSS:

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

The CSS:

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

Taken from Quick Tip: The Simplest Way To Center Elements Vertically And Horizontally

0人赞添加讨论(0) 举报

CSS center text (horizontally and vertically) insi

Update for 2016 / 2017:

To shrink wrap the width:

Common techniques as of 2014:

Approach 1 - `transform` `translateX`/`translateY`:

Approach 2 - Flexbox method:

Approach 3 - `table-cell`/`vertical-align: middle`:

Approach 4 - Absolutely positioned `50%` from the top with displacement:

Approach 5 - The `line-height` method (Least flexible - not suggested):

Approach 1

Approach 2

Approach 3

CSS center text (horizontally and vertically) insi

Update for 2016 / 2017:

To shrink wrap the width:

Common techniques as of 2014:

Approach 1 - transform translateX/translateY:

Approach 2 - Flexbox method:

Approach 3 - table-cell/vertical-align: middle:

Approach 4 - Absolutely positioned 50% from the top with displacement:

Approach 5 - The line-height method (Least flexible - not suggested):

Approach 1

Approach 2

Approach 3

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间

Approach 1 - `transform` `translateX`/`translateY`:

Approach 3 - `table-cell`/`vertical-align: middle`:

Approach 4 - Absolutely positioned `50%` from the top with displacement:

Approach 5 - The `line-height` method (Least flexible - not suggested):