Home > Article > Web Front-end > css居中的几种方式_html/css_WEB-ITnose
css居中的几种方式_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:20:26992browse
居中分水平和垂直两种，使用的频度也算是很高，下面分情况来讨论一下几种常用的实现方式。
欢迎指正文中的错误，同时如果有学习到新的方式也会更新在后面，也方便以后温故知新。
1.margin
这种方式只能实现固定宽度的块级元素水平居中，如果该元素没有设置宽度或者不是块级元素，则不会生效。
/*以div元素为例*/div{ width: 100px; height: 100px; margin: auto; /*或者margin: 0 auto;*/} 2.line-height
将单行文字line-height值设置为其父元素高度可以实现该行文字的垂直居中，局限也很明显。
<div id='container'> <p id='content'>文字内容</p></div>
#container{ height: 30px;}#content{ line-height: 30px;} 3.表格
如果你使用表格的话，那么可以利用td元素的align:center和valign:middle属性轻易的做到水平和垂直居中，但是考虑到现在表格布局的使用频率已经很低了，实用性其实并不强。
<table> <tr> <td width='200px' height='200px' align='center' valign='middle'> <!-- 子元素 --> </td> </tr></table>
4.display: table-cell
由于单元格可以轻易的实现水平和垂直居中，所以可以把父元素容器模拟成单元格元素，通过样式text-align:center以及vertical-align:middle来达到一样的效果。但是要注意的是text-align:center只能使非块级子元素水平居中而对块级子元素无效。
<div id="table-cel"> <div></div></div>
#table{ display: table-cell; width: 200px; height: 200px; vertical-align: middle; text-align: center;} 5.绝对定位居中
这个方法使用的相对也较多，但是需要子元素有固定的宽高，不多说直接上代码。
<body> <div></div></body>
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; }
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：HTML头部声明文件类型_html/css_WEB-ITnoseNext article：前端常用技巧_html/css_WEB-ITnose