居中的各种方式
居中是一个永恒的话题
水平居中
text-align
<!-- log -->
<style>
#p1 {
text-align: center;
border: 1px solid black;
}
#c1 {
border: 1px solid red;
}
</style>
<div id="p1">
<span id="c1">Content here</span>
</div>
margin 0 auto
<!-- log -->
<style>
#p2 {
border: 1px solid black;
height: 100px;
}
#c2 {
margin: 0 auto;
width: 50px;
height: 50px;
border: 1px solid red;
}
</style>
<div id="p2">
<div id="c2"></div>
</div>
定位
<!-- log -->
<style>
#p3 {
position: relative;
border: 1px solid black;
height: 100px;
}
#c3 {
position: absolute;
left: 50%;
margin-left: -25px;
width: 50px;
height: 50px;
border: 1px solid red;
}
</style>
<div id="p3">
<div id="c3"></div>
</div>
flex
<!-- log -->
<style>
#p4 {
border: 1px solid black;
height: 100px;
display: flex;
justify-content: center;
}
#c4 {
width: 50px;
height: 50px;
border: 1px solid red;
}
</style>
<div id="p4">
<div id="c4"></div>
</div>
浮动元素居中
<!-- log -->
<style>
#p5 {
border: 1px solid black;
height: 100px;
width: 500px;
}
#c5 {
float: left;
position: relative;
left: 50%;
/* 需要已知子元素的宽度 */
/* margin-left: -25px; */
/* CSS3 */
transform: translateX(-50%);
border: 1px solid red;
height: 50px;
width: 50px;
}
</style>
<div id="p5">
<div id="c5"></div>
</div>
垂直居中
vertical-align
关键点在于如何使参考的基线居中。
利用兄弟节点。
<!-- log -->
<style>
#parent1 {
border: 1px solid black;
height: 100px;
}
#child1 {
display: inline-block;
vertical-align: middle;
border: 1px solid red;
width: 50px;
height: 50px;
}
.help {
display: inline-block;
vertical-align: middle;
width: 0;
height: 100%;
}
</style>
<div id="parent1">
<div id="child1"></div>
<div class="help"></div>
</div>
利用 line-height
<!-- log -->
<style>
#parent1_ {
border: 1px solid black;
line-height: 100px;
}
#child1_ {
display: inline-block;
vertical-align: middle;
border: 1px solid red;
width: 50px;
height: 50px;
}
</style>
<div id="parent1_">
<div id="child1_"></div>
</div>
line-height
This method will work when you want to vertically center a single line of text. All we need to do is set a line-height on the element containing the text larger than its font-size.By default equal space will be given above and below the text and so the text will sit in the vertical center.Most tutorials will also set the height on the element with the same value given to the line-height. I don’t think setting the height is necessary, but if line-height alone doesn’t work for you, setting the height of the element will likely be the solution.
<!-- log -->
<style>
#parent2 {
border: 1px solid black;
}
#child2 {
border: 1px solid red;
line-height: 200px;
}
</style>
<div id="parent2">
<div id="child2">Text here</div>
</div>
绝对定位 + 负偏移修正
This method works for block level elements and also works in all browsers. It does require that we set the height of the element we want to center
<!-- log -->
<style>
#parent3 {
height: 100px;
position: relative;
border: 1px solid black;
}
#child3 {
display: inline-block;
position: absolute;
top: 50%;
height: 50px;
margin-top: -25px;
border: 1px solid red;
}
</style>
<div id="parent3">
<div id="child3">Content here</div>
</div>
同样的，利用 CSS3的translateY 有
<!-- log -->
<style>
#parent3_ {
height: 100px;
position: relative;
border: 1px solid black;
}
#child3_ {
display: inline-block;
position: absolute;
top: 50%;
transform: translateY(-50%);
height: 50px;
border: 1px solid red;
}
</style>
<div id="parent3_">
<div id="child3_">Content here</div>
</div>
注意 margin-top若用百分比，参照的是父元素的宽度，至于为啥这么设计，我也不知道。
<!-- log -->
<style>
#parent3__ {
height: 100px;
width: 500px;
position: relative;
border: 1px solid black;
}
#child3__ {
position: absolute;
top: 50%;
height: 50%; /* 50px */
margin-top: -5%; /* 25px */
border: 1px solid red;
}
</style>
<div id="parent3__">
<div id="child3__">Content here</div>
</div>
flex
<!-- log -->
<style>
#parent4 {
display: flex;
align-items: center;
height: 100px;
border: 1px solid black;
}
#child4 {
height: 30%;
width: 50%;
border: 1px solid red;
}
</style>
<div id="parent4">
<div id="child4">Content here</div>
</div>
