溢出文本可以居中吗？

Strange requirement. I would expand the boxes to the texts size.

One possible solution might involve a negative text-indent: text-indent: -50px;, but that won't work for smaller texts (first DIV in your example). No better idea here right now.

Try

word-wrap:break-word;

instead of:

white-space:nowrap;

or do you only want it on one line?

Div magic to the rescue. In case anyone is interested, you can see the solution here.

HTML:

<div id="outer">
<div id="inner">
<div id="text">some text</div>
</div>
</div>
<div id="outer">
<div id="inner">
<div id="text">some text that will overflow</div>
</div>
</div>

CSS:

#outer {
display: block;
position: relative;
left: 100px;
width: 100px;
border: 1px solid black;
background-color: silver;
}
#inner {
/* shrink-to-fit width */
display: inline-block;
position: relative;
/* shift left edge of text to center */
left: 50%;
}
#text {
/* shift left edge of text half distance to left */
margin-left: -50%;
/* text should all be on one line */
white-space: nowrap;
}

this one seems to work: add a wrapper block with position relative and left:50% margin-left:-100% you can see it here Here's the code:

<style>
div {
display: block;
position: relative;
left: 100px;
height:1.5em;
width: 100px;
text-align: center;
white-space: nowrap;
border: 1px solid black;
background-color: silver;
}
span{
display:block;
position:relative;
left:50%;
margin-left:-100%;
}
</style>
<div><span>some text</span></div>
<div><span>some text that will overflow</span></div>

To make the solution work for multi-line text, you can modify Nathan's solution by changing the #inner left from 50% to 25%.

I know this question is old, but I just had the same Problem and found a much easier solution with just a span. http://jsfiddle.net/7hy3w2jj/

<div>some text</div>
<div>
<span class="text-overflow-center">some text that will overflow</span>
</div>

Then you just need this definition

.text-overflow-center {
margin-left: -100%;
margin-right: -100%;
text-align: center;
}

If you can work with pseudo elements, it can be done with no html at all. Just add these definition to your text container. http://jsfiddle.net/7287L9a8/

div:before {
content: "";
margin-left: -100%;
}
div:after {
content: "";
margin-right: -100%;
}

The only downside to the pseudo variant is that it only works with one line of text.

Give the innermost div some margin: 0 -50%. If the elements are all display block or inline-block and text alignment is centered, this provides more shoulder room for the innermost element's text. At least, it works for me.

This looks some old question.

Now I think there is some good answer with flex.

You can do this simply like this:

<div id="small_div">overflowing text</div>


#small_div {
display: flex;
justify-content: center;
}

That's it.

Hope much help to you!