水平居中和垂直居中

倾然丶 夕夏残阳落幕 提交于 2019-12-10 02:14:31

1.水平居中

(1) 文本、图片等行内元素的水平居中

  给父元素设置text-align:center可以实现文本、图片等行内元素的水平居中。

(2) 确定宽度的块级元素的水平居中

  通过设置margin-left:auto;和margin-right:auto;来实现的。

(3) 不确定宽度的块级元素的水平居中

  方法一:

  使用table标签,table本身并不是块级元素,如果不给它设定宽度的话,它的宽度由内部元素的宽度“撑起”,但即使不设定它的宽度,仅设置margin-left:auto;和margin-right:auto;就可以实现水平居中!

  将需要居中的部分包含在table标签内,对table设置margin-left:auto;和margin-right:auto;就可以使table水平居中,间接使需要居中的部分水平居中。

  缺点:增加了无语意标签,加深了标签的嵌套层数。

复制代码
<style type="text/css">ul{list-style:none; margin:0; padding:0;}.wrap{ width:500px; height:100px;}table{margin-left:auto;margin-right:auto;}.test li{float:left; display:inline; margin-right:5px;}</style><div class="wrap">  <table>      <tbody>          <tr>            <td>              <ul class="test">                <li>1</li>                <li>2</li>                <li>3</li>              </ul>            </td>          </tr>      </tbody>  </table></div>
复制代码

 

  方法二:

  改变块级元素display为inline类型,然后使用text-align:center来实现居中。

  较方法一,好处是不用增加无语义标签,简化了标签的嵌套深度。坏处,将块级元素的display类型改为inline,缺少了一些块级元素的功能,比如高宽。

复制代码
<style>.wrap{ width:500px; heighe:100px;}.test{text-align:center; padding:5px;}.test li{display:inline;}</style><div class="wrap">  <ul class="test">    <li>1</li>  </ul>  <ul class="test">    <li>1</li>    <li>2</li>  </ul>  <ul class="test">    <li>1</li>    <li>2</li>    <li>3</li>  </ul></div>
复制代码

 

  方法三:

  通过给父元素设置float,然后父元素设置position:relative和left:50%,子元素设置position:relative和left:-50%来实现水平居中。

  可以保留块级元素仍以display:block的形式显示,而且不添加无语义标签,不增加嵌套深度,但缺点是设置了position:relative,带来一定的副作用。

复制代码
<style type="text/css">
ul{ list-style:none; margin:0; padding:0;}
.wrap{ background:#000; width:500px; height:100px;}
.test{ clear:both; padding-top:5px; float:left; position:relative; left:50%;}
.test li{ float:left; display:inline; margin-right:5px; position:relative; left:-50%;}
.test a{ float:left; width:20px; height:20px; text-align:center; line-height:20px; background:#09f; color:#fff; text-decoration:none;}
</style>

<div class="wrap">
    <ul class="test">
        <li><a href="#">1</a></li>
    </ul>
<ul class="test">
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
    </ul>
<ul class="test">
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">5</a></li>
    </ul>
</div>
复制代码

 

2.垂直居中

  (1) 父元素高度不确定的文本、图片、块级元素的垂直居中

  通过给父容器设置相同上下边距实现的,即设置padding-top和padding-bottom。

  (2)父元素高度确定的单行文本的垂直居中

  通过给父元素设置line-height来实现,line-height值和父元素高度值相同。

  (3)父元素高度确定的多行文本、图片、块级元素的垂直居中

  CSS中有一个用于垂直居中的属性vertical-align,但只有当父元素为td或者th时,这个属性才生效,对于其他块级元素,如div,p等,默认情况下是不支持vertical-align属性的。在firefox和ie8下,可以设置块级元素的display:table-cell来激活vertical-align属性,但ie6和ie7并不支持display:table-cell。

  方法一:

  直接使用table,因为td标签默认下就隐式设置了vertical-align:middle。

  方法二:

  对支持display:table-cell的ie8和firefox用display:table-cell和vertical-align:middle来实现居中,对不支持display:table-cell的ie6和ie7,使用特定格式的hack。

复制代码
<style type="text/css">
.mb10{margin-bottom:10px;}
.wrap{background:#000;width:500px;color:#fff;margin-bottom:10px;height:100px;display:table-cell;vertical-align:middle;*position:relative;}
.test{width:200px;height:50px;background:#f00;}
.verticalWrap{*position:absolute;*top:50%;}
.vertical{*position:relative;*top:-50%;}
</style>

<div class="mb10">
    <div class="wrap">
        <div class="verticalWrap">
            <div class="vertical">
                hello world<br />
                hello world<br />
                hello world
            </div>
        </div>
    </div>
</div>

<div class="mb10">
    <div class="wrap">
        <div class="verticalWrap">
            <img src="" class="vertical" />
        </div>
    </div>
</div>

<div class="mb10">
    <div class="wrap">
        <div class="verticalWrap">
            <div class="test vertical"></div>
        </div>
    </div>
</div>
复制代码
 
 

1.水平居中

(1) 文本、图片等行内元素的水平居中

  给父元素设置text-align:center可以实现文本、图片等行内元素的水平居中。

(2) 确定宽度的块级元素的水平居中

  通过设置margin-left:auto;和margin-right:auto;来实现的。

(3) 不确定宽度的块级元素的水平居中

  方法一:

  使用table标签,table本身并不是块级元素,如果不给它设定宽度的话,它的宽度由内部元素的宽度“撑起”,但即使不设定它的宽度,仅设置margin-left:auto;和margin-right:auto;就可以实现水平居中!

  将需要居中的部分包含在table标签内,对table设置margin-left:auto;和margin-right:auto;就可以使table水平居中,间接使需要居中的部分水平居中。

  缺点:增加了无语意标签,加深了标签的嵌套层数。

复制代码
<style type="text/css">ul{list-style:none; margin:0; padding:0;}.wrap{ width:500px; height:100px;}table{margin-left:auto;margin-right:auto;}.test li{float:left; display:inline; margin-right:5px;}</style><div class="wrap">  <table>      <tbody>          <tr>            <td>              <ul class="test">                <li>1</li>                <li>2</li>                <li>3</li>              </ul>            </td>          </tr>      </tbody>  </table></div>
复制代码

 

  方法二:

  改变块级元素display为inline类型,然后使用text-align:center来实现居中。

  较方法一,好处是不用增加无语义标签,简化了标签的嵌套深度。坏处,将块级元素的display类型改为inline,缺少了一些块级元素的功能,比如高宽。

复制代码
<style>.wrap{ width:500px; heighe:100px;}.test{text-align:center; padding:5px;}.test li{display:inline;}</style><div class="wrap">  <ul class="test">    <li>1</li>  </ul>  <ul class="test">    <li>1</li>    <li>2</li>  </ul>  <ul class="test">    <li>1</li>    <li>2</li>    <li>3</li>  </ul></div>
复制代码

 

  方法三:

  通过给父元素设置float,然后父元素设置position:relative和left:50%,子元素设置position:relative和left:-50%来实现水平居中。

  可以保留块级元素仍以display:block的形式显示,而且不添加无语义标签,不增加嵌套深度,但缺点是设置了position:relative,带来一定的副作用。

复制代码
<style type="text/css">
ul{ list-style:none; margin:0; padding:0;}
.wrap{ background:#000; width:500px; height:100px;}
.test{ clear:both; padding-top:5px; float:left; position:relative; left:50%;}
.test li{ float:left; display:inline; margin-right:5px; position:relative; left:-50%;}
.test a{ float:left; width:20px; height:20px; text-align:center; line-height:20px; background:#09f; color:#fff; text-decoration:none;}
</style>

<div class="wrap">
    <ul class="test">
        <li><a href="#">1</a></li>
    </ul>
<ul class="test">
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
    </ul>
<ul class="test">
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">5</a></li>
    </ul>
</div>
复制代码

 

2.垂直居中

  (1) 父元素高度不确定的文本、图片、块级元素的垂直居中

  通过给父容器设置相同上下边距实现的,即设置padding-top和padding-bottom。

  (2)父元素高度确定的单行文本的垂直居中

  通过给父元素设置line-height来实现,line-height值和父元素高度值相同。

  (3)父元素高度确定的多行文本、图片、块级元素的垂直居中

  CSS中有一个用于垂直居中的属性vertical-align,但只有当父元素为td或者th时,这个属性才生效,对于其他块级元素,如div,p等,默认情况下是不支持vertical-align属性的。在firefox和ie8下,可以设置块级元素的display:table-cell来激活vertical-align属性,但ie6和ie7并不支持display:table-cell。

  方法一:

  直接使用table,因为td标签默认下就隐式设置了vertical-align:middle。

  方法二:

  对支持display:table-cell的ie8和firefox用display:table-cell和vertical-align:middle来实现居中,对不支持display:table-cell的ie6和ie7,使用特定格式的hack。

复制代码
<style type="text/css">
.mb10{margin-bottom:10px;}
.wrap{background:#000;width:500px;color:#fff;margin-bottom:10px;height:100px;display:table-cell;vertical-align:middle;*position:relative;}
.test{width:200px;height:50px;background:#f00;}
.verticalWrap{*position:absolute;*top:50%;}
.vertical{*position:relative;*top:-50%;}
</style>

<div class="mb10">
    <div class="wrap">
        <div class="verticalWrap">
            <div class="vertical">
                hello world<br />
                hello world<br />
                hello world
            </div>
        </div>
    </div>
</div>

<div class="mb10">
    <div class="wrap">
        <div class="verticalWrap">
            <img src="" class="vertical" />
        </div>
    </div>
</div>

<div class="mb10">
    <div class="wrap">
        <div class="verticalWrap">
            <div class="test vertical"></div>
        </div>
    </div>
</div>
复制代码
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!