標(biāo)簽：css-常用技巧
- table-cell 式
將 center 元素的父容器設(shè)置為display:table, center 元素設(shè)置為的display:table-cell; vertical-align:middle。
<div class="container">
<div class="center">
<h2>fighting</h2>
<p>生活是苦逼的，夢想是牛逼的；再牛逼的夢想，也抵不住你傻逼似的堅持。</p>
</div>
</div>
.container {
display: table-cell;
vertical-align: middle;
width: 600px;
height: 300px;
border: 2px solid red;
}
.center {
display: block;
width: 350px;
margin-left: auto;
margin-right: auto;
border: 1px dotted blue;
}
- 絕對定位結(jié)合 translateY(-50%)
使用這種方法的情況下，如果需要垂直居中的絕對定位子元素不設(shè)置寬度的話，默認寬度為相對定位祖輩元素寬度的 50%
/*垂直居中*/
.parent { position: relative; }
.child {
position: absolute;
top : 50%;
transform: translateY(-50%); // translate 中的%單位是相對自身的
}
/*水平垂直居中*/
.parent { position: relative; }
.child {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
}
- 絕對定位結(jié)合 margin: auto
.parent {
position: relative;
}
.absolute-center {
width: 400px; height: 400px;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
// 上面代碼的 width: 400px; height: 400px; 僅是示例，但是需要設(shè)置居中元素的尺寸或者說需要的是圖片這種自身包含尺寸的元素。
- 彈性盒布局式（下面這個案例是水平垂直居中）；（ie11開始支持彈性布局）
<div class="container">
<div class="center">
<h1 class="h1">利用彈性盒布局進行垂直居中</h1>
<p class="p">河中醫(yī)六六六的圖書館</p>
</div>
<div class="content">第二個塊元素</div>
</div>
.container {
width: 70%; height: 500px;
border: 1px solid rgb(59, 119, 140);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.content {width: 30%;height: 50px;background-color: #666;}
.h1, .p {text-align: center;margin-top: 0;}
.img {width: 300px; height: auto; display: block; margin: auto;}
知識擴展：大小不固定圖片的垂直居中 http://www.zhangxinxu.com/study/200908/img-text-vertical-align.html#zhangxinxu
