css水平居中总结

前言

　　看了好多篇帖子，发现没有一个能够直接让新手很快上手使用水平居中布局的，所以在此进行一番总结，也算是我对水平居中布局的一点点积累沉淀，同时也方便初学者们拿来即用。

一、元素分类

1.行内元素

行内元素，也就是内联元素，可以在一行内显示多个。注：元素的高度、宽度、顶部底部边距均不可设置，元素的高度和宽度就是它包含的文字或图片的高度和宽度。

行内元素有这些：

<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>

当然有些时候可以通过以下代码变成块状元素：

display: block;

2.块状元素

块状元素，霸占一行，别的元素要另起行才可以。注：元素的高度、宽度、顶部底部边距可设置，元素宽度在不设置的情况下，是它本身父容器的100%。

块状元素有这些：

<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>

同样的你也可以通过以下代码把块状元素变为行内元素：

display: inline;

3.内联块状元素

内联块状元素，和行内元素相似，都在可以显示在一行上。注：元素的高度、宽度、行高以及顶和底边距都可设置，实用性较强。

内联块状元素有这些：<img>、<input>

可以通过以下代码把其他元素变为内联块状元素：

display: inline-block; 注：inline-block不支持IE6、IE7，使用时需要额外加上*display:inline;*zoom:1;以触发layout。

二、正常元素的居中方法

a.使用左右外边距自适应方法：

width: 200px;margin: 0 auto; /*使用此方法需要变为块状元素，且需要固定宽度*/

b.使用外边距加定位方法：/*此方法不适用于行内元素，需要变为块状元素或内联块状元素*/

width: 500px;height: 30px; position:relative; margin-left: 50%; left: -250px; /*250px是元素的宽度除以2得到，且需要进行定位*/

c.父元素设置text-align: center; /*使用此方法需要变为行内元素或内联块状元素*/

d.对于宽度不确定的元素，可以在外层套上一个table标签，然后给table使用margin: 0 auto来居中：/*此方法只适用于块状元素*/

table{　　width: 960px;　　height: 500px;　　border: 1px solid red;　　margin: 0 auto;}.center{　　border: 1px solid blue;}

HTML代码：

e.对于宽度不确定的元素，给它和父元素进行定位，分别设置left: -50%和left: 50%，然后实现水平居中：/*此方法只适用于块状元素*/

.father{ 　　position:relative; 　　left:50%; 　　width: 960px; 　　height: 300px; 　　background: yellow;}.children{　　height: 30px; 　　background:#ccc; 　　position:relative; 　　left:-50%;}

HTML代码：

<div class="father">　　<div class="children">aaaaaaaa</div></div>

f.使用css3的flexbox居中，要在父元素中设置display:flex和justify-content: center，此方法适用于所有元素，但是存在IE不兼容的情况，PC页面慎用。

flex使用方法：

display:flex; /*默认为块状元素*/

display:inline-flex; /*变成行内元素*/

居中实例：

.father{

　　display: flex;　　display: -webkit-flex;　　justify-content: center;　　-webkit-justify-content: center;

}

三、浮动元素的居中方法

浮动元素：即使用float: left｜right进行浮动操作后的元素。

1.浮动元素不确定宽度时，使用绝对定位，加入left: 50%和margin-left: -81px。

.children{　　text-align: center;　　float: left;　　height: 30px;　　position: absolute;　　left: 50%;　　margin-left: -81px;　　background: #ccc;}

2.浮动元素固定宽度时，使用相对定位，加入margin-left: 50%和left: -width/2。 /*width/2即固定宽度的一半*/

.children{　　width:500px;　　height:300px;　　float:left;　　margin-left:50%;　　position:relative;　　left:-250px;　　background-color:#CCC;}

内容持续更新中...

如有错误的地方或者更好用的方法，希望大家能在评论区留言指正，让我们共同进步！