css 样式里面怎么让一个DIV居中 ?

html-css0989

css 样式里面怎么让一个DIV居中 ?,第1张

通常的方法为：先设置div的宽度，然后使用如下样式：

margin: 10px auto /* 上下边距10px，左右边距自动以达到左右居中的目的*/

以下为示例：

HTML代码中给出div

<div class="outer">

<div class="content"></div>

</div>

添加样式

/*外层边框*/

div.outer{width:200pxheight:150pxborder:1px solid green}

div.content{

width:100pxheight:50px /*设置大小*/

margin:20px auto        /*设置左右边距自动以使其居中*/

border:1px solid red

}

显示效果

方法和详细的操作步骤如下：

1、第一步，打开html编辑器并创建一个新的html文件，具体见下面的图示，进入到下一步骤中。

2、第二步，新建完一个新的html文件后，在index.html的<style>标签中，输入如下所示的CSS代码，具体见下面的图示，进入到下一步骤中。

3、第三步，输入完CSS代码之后，接下来运行index.html页面。

可以发现，本地图片通过背景图片中的本地路径成功调用为了背景图片，具体见下面的图示。这样，图片就成功加入了。

一般来讲针对整体的式样必须放到css里面，这样可以制定全局的整体的风格。

还有些复杂的滤镜效果也应该放到css里，可以精简jsp(或者其他页面的代码)。

其实一般来说，我们建议把样式尽量都放到css中，这样样式一旦有变更可以只修改变css，而无需修改其他代码，可以有效的降低作业负荷，避免漏改和误改的发生。这点在做大型项目时尤其重要。