css水平居中

**

css水平居中

**

第一种：对于行内元素：text-align:center;


第二种：强制内联

display：inline-block;（或display:inline）和text-align:center;实现水平居中

第三种：绝对定位实现水平居中

.content{

position: absolute;

left: 50%;

transform: translateX(-50%); /* 移动元素本身50% */

background: aqua;

}

第四种：相对定位实现水平居中
.contentParent{

display: inline-block; /* 把父元素转化为行内块状元素 */

/*float: left; 把父元素转化为行内块状元素 */

position: relative;

left: 50%;

}

/目标元素/

.content{

position: relative;

right: 50%;

background-color:aqua;

}

二，居中元素不定宽高

1，line-height（把children设为行内元素，通过text-align就可以做到水平居中，使用vertical-align也可以在垂直方向做到居中。）

.parent{
line-height: 400px;
text-align: center;
font-size: 0px;
}
.children{
font-size: 16px;
display: inline-block;
vert-align: middle;
line-height: initial;
text-align: left;
}
2，对于水平居中，可以使用最简单的center标签，