水平居中
inlink-block text-align
<style>
.parent{
width: 100%;
height: 50px;
background: red;
text-align: center;
}
.child{
display: inline-block;
background: #ccc;
}
</style>
<div class="parent">
<div class="child">我相信这么优秀的你,一定会成功的</div>
</div>
table margin
<style>
.parent{
width: 100%;
height: 50px;
background: red;
}
.child{
display: table;
margin: 0 auto;
background: #ccc;
}
</style>
<div class="parent">
<div class="child">我相信这么优秀的你,一定会成功的</div>
</div>
absolute transform
<style>
.parent{
width: 100%;
height: 50px;
background: red;
position: relative;
}
.child{
background: #ccc;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
</style>
<div class="parent">
<div class="child">我相信这么优秀的你,一定会成功的</div>
</div>
flex margin
<style>
.parent{
width: 100%;
height: 50px;
background: red;
display: flex;
}
.child{
background: #ccc;
margin: 0 auto;
}
</style>
<div class="parent">
<div class="child">我相信这么优秀的你,一定会成功的</div>
</div>
flex justify-content
<style>
.parent{
width: 100%;
height: 50px;
background: red;
display: flex;
justify-content: center;
}
.child{
background: #ccc;
}
</style>
<div class="parent">
<div class="child">我相信这么优秀的你,一定会成功的</div>
</div>
垂直居中
table-cell vertical-align
<style>
.parent{
width: 100px;
height: 100px;
background: red;
display: table-cell;
vertical-align: middle;
}
.child{
background: #ccc;
}
</style>
<div class="parent">
<div class="child">学无止境</div>
</div>
absolute transform
<style>
.parent{
width: 100px;
height: 100px;
background: red;
position: relative;
}
.child{
background: #ccc;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
</style>
<div class="parent">
<div class="child">学无止境</div>
</div>
flex align-items
<style>
.parent{
width: 100px;
height: 100px;
background: red;
display: flex;
align-items: center;
}
.child{
background: #ccc;
}
</style>
<div class="parent">
<div class="child">学无止境</div>
</div>
水平垂直居中
absolute transform
<style>
.parent{
width: 400px;
height: 100px;
background: red;
position: relative;
}
.child{
background: #ccc;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
<div class="parent">
<div class="child">学无止境</div>
</div>
扫描二维码关注公众号,回复:
1248673 查看本文章
line-block text-align table-cell vertical-align
<style>
.parent{
width: 400px;
height: 100px;
background: red;
display: table-cell;
vertical-align: middle;
text-align: center;
}
.child{
background: #ccc;
display: inline-block;
}
</style>
<div class="parent">
<div class="child">学无止境</div>
</div>
flex justify-content align-items
<style>
.parent{
width: 400px;
height: 100px;
background: red;
display: flex;
justify-content: center;
align-items: center;
}
.child{
background: #ccc;
}
</style>
<div class="parent">
<div class="child">学无止境</div>
</div>