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

html-css018

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

第一种方式：设置body 居中。在CSS中的代码是（body{text-align:center}）

第二种方式：用盒子模型，首先设置一个Div ，这个DIV的宽度为100%，然后在这个DIV居中，那么在这个DIV中加的内容就居中显示，代码如下：

<div class="div1">

<div class="div2"></div>

</div>

CSS 样式代码：

<style type="text/css">

.div1{text-align:centerwidth:100%}

.div2{width:980pxbackground:red} //为了看清效果，加了背景颜色

</style>

第三种方式：margin：0 auto；

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

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

以下为示例：

HTML代码中给出div

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

添加样式

1234567   /*外层边框*/div.outer{width:200pxheight:150pxborder:1px solid green}div.content{    width:100pxheight:50px /*设置大小*/    margin:20px auto        /*设置左右边距自动以使其居中*/    border:1px solid red}   

显示效果

水平居中的话就在img所在的标签设置text-align:center

垂直居中的话就在img上设置vertical-align:middle

至于水平垂直居中？这的问题与上面的已经重复了

例如：

<div style="text-align:centerwidth:100pxheight:40px"><img src="图片" style="vertical-align:middle" width="16" height="16" /></div>