仅当我使用大的Lorem Ipsum时，我的文本才会居中

Question

Strange. Very strange. So I've got a paragraph of Lorem Ipsum in a XML file:

<?xml version="1.0" encoding="UTF-8"?>
<post>
    <title>Test</title>
    <content>Some test content<br/><br/><br/>TestTest Test.
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent pulvinar eu magna bibendum dictum. Pellentesque interdum mi ac imperdiet tristique. Phasellus nec sapien elit. Donec convallis ante non vestibulum ultrices. Quisque ullamcorper est lectus, a sollicitudin sapien faucibus ac. Nam gravida rhoncus elementum. Nullam et velit dapibus, dignissim sem sit amet, luctus magna. Cras mollis eros dapibus, imperdiet purus convallis, dictum magna. Aliquam nisl lacus, venenatis vel lacinia quis, finibus at est. Nulla maximus sed enim in pretium. Fusce eu placerat dui. Curabitur mi magna, malesuada efficitur tellus sit amet, rutrum tristique erat. Phasellus sit amet orci purus. Pellentesque congue orci a tincidunt condimentum. Nullam semper, metus a tincidunt pulvinar, felis nibh faucibus mauris, a ultricies mauris tortor vitae sem. Praesent sed aliquet mauris.

Pellentesque odio lorem, dictum sed ipsum eget, viverra luctus libero. In tincidunt nisl eu nunc elementum, ut facilisis massa volutpat. In enim nibh, gravida vitae tempus eget, semper at orci. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam erat volutpat. Duis mattis tellus id lacus tempor tempus. Proin posuere leo quis neque imperdiet, sit amet facilisis lectus consectetur. Ut quam velit, elementum vel ultrices in, consectetur vel arcu. Praesent enim risus, fermentum vitae eros quis, dignissim convallis ligula. Vestibulum ultrices tempus diam id dapibus.

Quisque vel elit diam. Vivamus sed rhoncus nunc, id tincidunt augue. Vivamus et cursus mauris. Etiam finibus, risus accumsan pulvinar facilisis, ex erat vulputate nunc, sit amet elementum velit augue ut arcu. Etiam quis pretium urna, a rutrum ex. In lacinia metus nec urna pellentesque, sed accumsan nisi imperdiet. Phasellus porttitor porttitor lacus, nec aliquam magna scelerisque quis. Nullam auctor diam nisl, sed accumsan nisi ullamcorper ut. Sed nec ligula neque. Maecenas enim est, pharetra sit amet pulvinar nec, varius at tellus. In convallis tincidunt ex eu porttitor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus nec luctus ex, et ultrices turpis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

Fusce aliquet aliquet turpis, volutpat tristique lacus euismod id. Maecenas eu tortor eget tellus sodales fringilla. Sed ultricies ante eu consectetur luctus. Ut lobortis ullamcorper lacinia. Nam mattis felis ullamcorper leo ornare finibus. In quis commodo ligula. Nulla auctor purus maximus massa suscipit, at hendrerit arcu congue. Proin tincidunt porttitor quam, ut scelerisque urna feugiat sit amet. Donec mollis magna auctor finibus faucibus. Fusce fermentum ornare lobortis. Ut a eros a enim laoreet venenatis. Etiam eget elementum tortor. Nulla in risus eu erat ullamcorper pellentesque.

Nunc ac tincidunt massa, at vestibulum mi. Fusce iaculis, sem sed dictum volutpat, felis orci faucibus urna, vel imperdiet neque quam at tortor. Praesent porta arcu auctor, auctor massa sit amet, pretium eros. Nullam ligula neque, faucibus varius nulla et, dictum commodo dui. Nullam tempor accumsan malesuada. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc in sodales odio. Cras posuere sagittis sem. Proin non augue vitae tortor vulputate imperdiet. Aenean tincidunt, leo at rhoncus lacinia, urna neque placerat mi, vitae dapibus mauris nibh at quam. Aenean in cursus ipsum, sed varius nisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras pellentesque suscipit lacus. Aliquam erat volutpat. Nulla scelerisque, ligula quis porta dapibus, mi lacus fermentum justo, eget pulvinar odio mauris non sem.
</content>
    <date>April 1st 2015</date>
</post>

And this gets centered (along with the title "Test") To the center of the page, with text-align:0 along the margin stuff, and left:0 and right:0.

Here's the jsfiddle of the big text:

http://jsfiddle.net/6k5szuf0/embedded/result

And here's the jsfiddle of it not working

http://jsfiddle.net/6k5szuf0/1/embedded/result

Keep in mind, all I changed was the <content> .

Answer 1

You need to use text-align in #content div:

#content {
    margin-top:20px;
    position:absolute;
    top:100%;
    text-align: center;
    width: 100%;/*also set it's width when you use absolute position*/
}

Here's the result .

Also a side note: you don't need to use:

.center {
    text-align:center;
    left: 0;
    right: 0;
    margin: 0 auto;
    margin-left: auto;
    margin-right: auto;
}

.post_content {
    left: 0;
    right: 0;
}

Notice: When you use left, right, bottom, or top you need to define the position, without setting the position explicitly to relative, absolute or fixed the values won't work as it would be in static position and in static position can't define those values.