web前端字体居中_css内容居中

方法一：

父级：text-alien：center;

子集：display:inline-block;

css

.father{

text-align: center;

/*position: relative;

float: left;

left: 50%;*/

}

.father>div{

background-color: pink;

margin-top: 10px;

height: 100px;

width: 200px;

}

.center{

display: inline-block;

}

html

hello

方法二：

子集：margin:0 auto;

.father{

/*text-align: center;*/

/*position: relative;

float: left;

left: 50%;*/

}

.father>div{

background-color: pink;

margin-top: 10px;

height: 100px;

width: 200px;

}

.center{

/*display: inline-block;*/

margin: 0 auto;

}

hello

方法三：

集合float、position来完成

.father{

position: relative;

float: left;

left: 50%;

}

.father>div{

background-color: pink;

margin-top: 10px;

height: 100px;

width: 200px;

}

.center{

position: relative;

float: left;

left: -50%;

}

hello

方法四：

用transform(css3)、position完成

.father{

position: relative;

background: yellow;

left: 50%;

}

.father>div{

background-color: pink;

margin-top: 10px;

height: 100px;

width: 200px;

}

.center{

position: absolute;

transform: translate(-50%, 0);

}

hello