Maison > interface Web > tutoriel HTML > css居中的几种方式_html/css_WEB-ITnose

css居中的几种方式_html/css_WEB-ITnose

WBOY
Libérer: 2016-06-24 11:20:26
original
1025 Les gens l'ont consulté

居中分水平和垂直两种,使用的频度也算是很高,下面分情况来讨论一下几种常用的实现方式。

欢迎指正文中的错误,同时如果有学习到新的方式也会更新在后面,也方便以后温故知新。

1.margin

这种方式只能实现固定宽度的块级元素水平居中,如果该元素没有设置宽度或者不是块级元素,则不会生效。

/*以div元素为例*/div{    width: 100px;    height: 100px;    margin: auto; /*或者margin: 0 auto;*/}
Copier après la connexion

2.line-height

将单行文字line-height值设置为其父元素高度可以实现该行文字的垂直居中,局限也很明显。

<div id='container'>    <p id='content'>文字内容</p></div>
Copier après la connexion

#container{    height: 30px;}#content{    line-height: 30px;}
Copier après la connexion

3.表格

如果你使用表格的话,那么可以利用td元素的align:center和valign:middle属性轻易的做到水平和垂直居中,但是考虑到现在表格布局的使用频率已经很低了,实用性其实并不强。

<table>    <tr>        <td width='200px' height='200px' align='center' valign='middle'>            <!-- 子元素 -->        </td>    </tr></table>
Copier après la connexion

4.display: table-cell

由于单元格可以轻易的实现水平和垂直居中,所以可以把父元素容器模拟成单元格元素,通过样式text-align:center以及vertical-align:middle来达到一样的效果。但是要注意的是text-align:center只能使非块级子元素水平居中而对块级子元素无效。

<div id="table-cel">    <div></div></div>
Copier après la connexion

#table{    display: table-cell;    width: 200px;    height: 200px;    vertical-align: middle;    text-align: center;}
Copier après la connexion

5.绝对定位居中

这个方法使用的相对也较多,但是需要子元素有固定的宽高,不多说直接上代码。

<body>    <div></div></body>
Copier après la connexion

html,body{    width: 100%;    height: 100%;}body{    position: relative;}body>div{    position: absolute;    width: 100px;    height: 100px;    left: 50%;    top: 50%;    /*此时的元素并不是居中的,向右偏了一半的宽度,向下偏了一半的高度*/    /*所以要使用margin把元素拉回来*/    margin: -50px 0 0 -50px; }
Copier après la connexion

 

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal