一、准备工作

首先，我们准备一个存放诗句的div容器放在body中。

<div class="poemBox">
    <h1>《采桑子·长者》</h1>
    <address>当代·无名氏</address>
    <p>人间易老他不老，时刻一秒</p>
    <p>今又一秒，香江怒斥分外好</p>
    <p>苟利国家生死以，不若代表</p>
    <p>更若代表，西方国家谁未到</p>
</div>

其效果如下图所示：

二、容器居中显示

我们添加下面这段CSS样式代码：

<style type="text/css">
    body{
        text-align: center;
    }
</style>

此时的诗句效果如下图：

内容虽然居中了，但是我们想看下div元素是否也是居中了。我们对div元素添加浅色背景,并且给div添加宽度。

<style type="text/css">
    body{
        text-align: center;
    }
    .poemBox{
        width: 300px;
        background: #E8E8E8;
    }
</style>

效果如下图所示：

定义宽度和背景色的div并没有居中显示，但div中的内容是居中显示的。我们想要让容器居中，可以设置容器的左右外边距为左右自适应。

<style type="text/css">
        body{
            text-align: center;
        }
        .poemBox{
            width: 300px;
            background: #E8E8E8;
            margin-left: auto;
            margin-right: auto;
        }
    </style>

此时的诗句效果是这样的：

三、容器居右显示

1、利用浮动方式将容器居右显示

<style type="text/css">
    .poemBox{
        width: 300px;
        background: #E8E8E8;
        float: right;
    }
</style>

注意：利用浮动会带来清除浮动问题，这个问题会在后面专门介绍。

2、利用定位方式将容器居右显示

<style type="text/css">
    .poemBox{
        position: absolute;
        right: 0px;
        width: 300px;
        background: #E8E8E8;
    }
</style>

关于absolute的有关内容会在后面有更多的介绍

通过上面几个实验，关容器位置的一些内容就先简单介绍到这里吧。