CSS如何使元素居中

（一）元素水平居中的方式1）行级元素水平居中对齐（父元素设置 text-align:center）

行级元素垂直居中

2. 块级元素水平居中对齐（margin: 0 auto）

块级元素水平居中

3）浮动元素水平居中
（1）宽度不固定的浮动元素

html代码

我是浮动的

CSS样式

.outerbox{
float:left;
position:relative;
left:50%;
}
.innerbox{
float:left;
position:relative;
right:50%;
}

（2）宽度固定的互动元素
html代码

我是浮动的

css代码

.outerbox{
background-color:pink; /*方便看效果 */
width:500px ;
height:300px; /高度可以不设/
margin: -150px 0 0 -250px; /使用marin向左移动250px，保证元素居中/
position:relative; /相对定位/
left:50%;
top:50%;
}

4）让绝对定位的元素水平居中对齐

.center{
position: absolute; /绝对定位/
width: 500px;
height:300px;
background: red;
margin: 0 auto; /水平居中/
left: 0; /此处不能省略，且为0/
right: 0; /此处不能省略，且为0/
}
经验分享：水平居中的主要属性有

1. text-alin:center;
2. margin:0 auto
3. position:relative|absolute; left:50%;（二）元素垂直居中对齐
   1）对行级元素垂直居中（heiht与line-height的值一样）

height:300px;
line-height:300px;

2）对块级元素垂直居中对齐
2.1 父元素高度固定的情况
1）父元素的height与line-height值相同
2）需要垂直居中的元素
vertical-align:middle;// 垂直居中对齐
display:inline|inline-block 块级元素转行级元素
HTML代码

CSS代码

.center{
width: 500px;
height:300px;
line-height: 300px;
border:1px solid;
}
.inner{
background: blue;
width: 300px;
height: 100px;
display: inline-block;
vertical-align: middle;
}
2.2 父元素高度不固定的情况
父元素的padding-top和padding-bottom一样