子元素不定宽高
1. 利用伪元素 inline-block & vertical-align, 该方法兼容ie8 (ie8仿真)
该方法的居中子元素display属性为inline-block
<div class="wrap">
<div class="content">
</div>
</div>
.wrap {
text-align: center;
width: 100%;
height: 100px;
background: #ccc;
}
.wrap:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
.wrap .content {
display: inline-block;
vertical-align: middle;
}
2. 通过writing-mode属性改变水平流为垂直流
居中子元素display属性为inline-block (text-align作用于内联元素)
<div class="center-box">
<div class="center-wrap">
<div class="center-content">
你想要上下左右居中的内容(元素,文本或其任意组合)
</div>
</div>
</div>
.center-box{
width: 200px;
height: 200px;
border: 1px solid #333;
writing-mode: tb-lr;
writing-mode: vertical-lr;
text-align: center;
}
.center-wrap{
writing-mode: lr-tb;
writing-mode: horizontal-tb;
text-align: center;
width: 100%;
display: inline-block;
}
.center-content{
display: inline-block;
text-align: left;
text-align: initial;
}
居中子元素的display属性为block,设置margin: auto 0;
<div class="center-box">
<div class="center-wrap">
<ul class="center-content">
<li>1</li>
<li>1</li>
<li>1</li>
</ul>
</div>
</div>
.center-box{
width: 200px;
height: 200px;
border: 1px solid #333;
writing-mode: tb-lr;
writing-mode: vertical-lr;
text-align: center;
}
.center-wrap{
writing-mode: lr-tb;
writing-mode: horizontal-tb;
margin: auto 0;
}
居中子元素定高
居中子元素通过absolute定位,该方法并不是常规的设置top为50%,然后再向上移动居中元素高度的一半,而是将top bottom 设置为0 ,再通过margin: auto定位
.content {
height: 100px;
position: absolute;
margin: auto;
left: 0;
top: 0;
bottom: 0;
right: 0;
}
参考:
《css世界》
https://github.com/liyongleihf2006/center-box
https://www.jianshu.com/p/71b4afe4f0a3