CSS水平垂直居中解決方案(6種)
發(fā)布時間：2018-02-10 15:11:32 作者：我是南方大漢 
我要評論
我要評論這篇文章主要介紹了CSS水平垂直居中解決方案(6種)的相關(guān)資料,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
準備
創(chuàng)建元素
<div class="parent"> <div class="child">child</div> </div>
垂直水平居中方案一：知道寬度的情況下 absolute+margin負值
.parent {
width:400px;
height:400px;
background: red;
position: relative;
}
.child {
position: absolute;
left:50%;
top:50%;
background: yellow;
width:50px;
height:50px;
margin-left:-25px;
margin-top:-25px;
}
垂直水平居中方案二：不知道寬高的情況下 absolute+transform
.parent {
width:400px;
height:400px;
background: red;
position: relative;
}
.child {
position: absolute;
left:50%;
top:50%;
transform: translate(-50%,-50%);
}
垂直居中方案三：position+margin:auto
.parent {
position:relative;
width:200px;
height:200px;
background: red;
}
.child {
width:80px;
height:40px;
background: yellow;
position: absolute;
left:0;
top:0;
right:0 ;
bottom:0;
margin:auto;
}
垂直居中方案四：+ 多行文本的垂直居中 :table-cell+vertical-align:middle;
.parent {
height: 300px;
width:400px;
border: 1px solid red;
display: table-cell;
vertical-align: middle;
text-align: center;
}
.child {
display: inline-block;
width:50px;
height:50px;
background: blue;
}
/* 或者 */
.parent {
width: 400px;
height: 300px;
display: table-cell;
vertical-align: middle;
border: 1px solid red;
text-align: center;
}
.child {
display: inline-block;
vertical-align: middle;
background: blue;
}
垂直居中方案五：display: flex
.parent {
width:400px;
height:200px;
background:red;
display: flex;
justify-content:center;
align-items:center;
}
.child {
height:100px;
width:100px;
background:green;
}
垂直居中方案六：偽元素
.parent {
width:200px;
height:200px;
background:red;
text-align: center;
}
.child {
height:100px;
width:100px;
background:yellow;
display: inline-block;
vertical-align: middle;
}
.parent:before {
content:"";
height:100%;
vertical-align: middle;
display: inline-block;
}
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
淺析CSS3 中的 transition，transform，translate之間區(qū)別和作用
這篇文章主要介紹了CSS3 中的 transition，transform，translate之間區(qū)別和作用，本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友參考下2020-03-26css3 中translate和transition的使用方法
這篇文章主要介紹了css3 中translate和transition的使用方法,本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2020-03-26
這篇文章主要介紹了CSS3 translate導致字體模糊的實例代碼，非常不錯，具有一定的參考借鑒價值，需要的朋友參考下吧2019-08-30利用css3 translate完美實現(xiàn)表頭固定效果
這篇文章主要介紹了利用css3 translate完美實現(xiàn)表頭固定效果的相關(guān)資料，文中通過示例代碼介紹的很詳細，相信對大家具有一定的參考價值，需要的朋友們下面來一起看看吧。2017-02-28- 這篇文章主要為大家詳細介紹了CSS3 3D 位移translate效果實例，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-05-03
CSS3實現(xiàn)水平居中、垂直居中、水平垂直居中的實例代碼
在前端面試中經(jīng)常會遇到css居中效果的實現(xiàn)，今天小編給大家分享幾種css垂直水平居中的方法，通過實例代碼給大家講解，需要的朋友參考下吧2020-02-27- 這篇文章主要介紹了css常用元素水平垂直居中方案,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習2019-08-09
css實現(xiàn)元素水平垂直居中常見的兩種方式實例詳解
這篇文章主要給大家介紹了css實現(xiàn)元素水平垂直居中的兩種方式，文中給出了完整的示例代碼供大家參考學習，對大家的學習或者工作具有一定的參考價值，有需要的朋友們下面來2017-04-23- 這篇文章主要介紹了CSS水平垂直居中的幾種方法總結(jié),垂直居中是布局中十分常見的效果之一,本文介紹了幾種方法，有興趣的可以了解一下。2016-12-19
- 這篇文章主要為大家詳細介紹了css讓容器水平垂直居中的7種方式,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-10-17
