css 居中布局
水平居中
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 ```
我相信这么优秀的你,一定会成功的
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 ```
学无止境
水平垂直居中
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>
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>