实现子div水平居中显示
2018-12-13 dingshangchao CSS样式表
实现子div水平居中显示，实现图示效果
<style type="text/css">
.parent{
background-color: grey;
width: 500px;
height:20px;
}
.child{
background-color: red;
height:20px;
}
</style>
方法一：
.parent{
text-align: center;
}
.child{
display: inline-block;
}
方法二：
.child{
display: table;
margin: 0 auto;
}
方法三：
.parent{
position: relative;
}
.child{
position: absolute;
left: 50%;
transform: translateX(-50%);
}
方法四：
.parent{
display: flex;
justify-content: center;
}
方法五：
.parent{
display: flex;
}
.child{
margin: 0 auto;
}