css水平垂直居中

sihai 發(fā)布于2019-04-22 16:12 / 1675人閱讀

摘要：上面達(dá)不到需求，可以考慮使用定位，移動(dòng)端能使用就使用垂直居中，單行文本，使用等于父元素高度，如果不行，就可以設(shè)置父元素，能解決一大部分問題，如果還不行就考慮定位配合，使用。

1.CSS的水平居中，

1.1 父元素是塊狀元素，子元素為行內(nèi)元素的居中，直接設(shè)置text-aglin: center ,常見的文本，span 標(biāo)簽，button,img等行內(nèi)元素都是可以使其水平居中的

.box{
 text-align: center;
 div 
 span 11111 /span 
 button 123 /button 
 /div

1.2 父元素為塊狀元素，子元素也為塊狀元素

1.2.1 子元素寬度已知，則可以設(shè)置子元素 margin 0 auto,就可以使子元素相對(duì)于父元素水平居中

 style 
 .box{
 background-color: pink;
 .con-box{
 width: 300px;
 margin: 0 auto;
 height: 30px;
 background-color: aqua;
 /style 
 div 
 div 
 /div 
 /div

1.3? 父元素為塊狀元素，子元素為塊狀元素寬度不定，直接設(shè)置子元素display:inline, 然后設(shè)置父元素的text-aglin:center

 style 
 .box{
 background-color: pink;
 text-align: center
 .con-box{
 display: inline;
 /style 
 div 
 div 
 111111
 /div 
 /div

注：使用彈性布局，使用定位，都是可以使子元素相對(duì)于父元素水平居中的

2.垂直居中

2.1 父元素為塊狀元素，子元素為行內(nèi)元素，如單行文本，直接設(shè)置父元素的line-height 等于父元素的高度，

 style 
 .box{
 background-color: pink;
 height: 50px;
 line-height: 50px;
 .con span{
 line-height: 50px;
 /style 
 div 
 span 111111 /span 
 /div

2.2 父元素為塊狀元素，子元素為多行文本，則設(shè)置父元素的line-height 等于父元素高度除于行數(shù)，

.box{
 background-color: pink;
 height: 50px;
 line-height: 25px;
 .con span{
 line-height: 50px;
 div 
 span 111111 /span br 
 span 111111 /span br 
 /div

2.3 父元素為塊狀元素，子元素也為塊狀元素，

2.3.1 子元素高度未知，改變父元素的display 屬性設(shè)置為 table-cell,然后設(shè)置vertical-align:middle;

 style 
 .box{
 background-color: pink;
 height: 50px;
 display: table-cell;
 vertical-align:middle;
 .box .con-box{
 background-color: aqua;
 /style 
 div 
 div 
 1111
 /div 
 /div

2.3.2 子元素高度已知，則設(shè)置margin-top，元素高度減去子元素高度除于2; 記住一定要設(shè)置父元素的overflow: hidden;?

（相鄰塊狀元素 margin會(huì)共享，取最大值，不設(shè)置overflow: hidden，子元素的margin-top:10px 會(huì)跑到父元素上）

 style 
 .box{
 background-color: pink;
 height: 50px;
 overflow: hidden; 
 .box .con-box{
 margin-top: 10px;
 height: 30px;
 line-height: 30px;
 background-color: aqua;
 /style 
 div 
 div 
 1111
 /div 
 /div

2.3.3 子元素為圖片，直接可以設(shè)置父元素display: table-cell;?vertical-align: middle;

 style 
 .box{
 background-color: pink;
 height: 450px;
 display: table-cell; 
 vertical-align: middle; 
 /style

2.3.4 子元素為多個(gè)，比如圖片，外加別的行內(nèi)元素，使用2.3.3，文本可以不用改變，必讀給圖片加?vertical-align: middle;

 style 
 .box{
 background-color: pink;
 height: 450px;
 display: table-cell; 
 vertical-align: middle; 
 img{
 vertical-align: middle
 /style 
 div 
 img src="../xunguang-4.jpg" alt="" 
 span 12123123 /span 
 1111111
 /div

3.CSS 水平垂直居中上面兩兩組和使可以實(shí)現(xiàn)的，我們主要看一下定位和flex 實(shí)現(xiàn)水平垂直居中

3.1子元素高度未知，高度已知的塊狀元素水平垂直居中，（寬度未知，塊狀元素肯定使占滿整行的，就不存在水平居中了）

3.1.1使用定位配置，配合margin 0 auto ,top 50%,寬度未知，只能使用transform:translateY(-50%);

 style 
 .box{
 background-color: pink;
 height: 450px; 
 position: relative; // relative 默認(rèn)沾滿整行，absolute話，未設(shè)置寬度則由子元素?fù)伍_ 
 overflow: hidden; 
 .box .con-box{
 position: relative;
 width: 300px;
 margin: 0 auto;
 background-color: aqua;
 top:50%;
 transform: translateY(-50%);
 /style 
 div 
 div 
 123123123123
 1222222222
 /div 
 /div

3.1.2，使用定位，子元素 left 0 right 0 top 0 bottom 0 margin auto （一定要注意父子元素的定位屬性）

 style 
 .box{
 background-color: pink;
 height: 450px; 
 position: relative; /* 父元素一定為relative */ 
 overflow: hidden; 
 .box .con-box{
 position: absolute; /* *子元素一定 為absolete*/
 width: 300px;
 background-color: aqua;
 top:0;
 left: 0;
 right: 0;
 bottom: 0;
 margin: auto;
 /style 
 div 
 div 
 123123123123
 1222222222
 /div 
 /div

3.2 ，子元素寬度，高度都已知，3.1 上的兩種方法都適用寬度高度已經(jīng)的子元素水平垂直居中

3.2.1 margin-top: -width/2 具體的值，?transform: translateY(-50%) 這個(gè)有兼容性問題，需要ie9以上，具體寬度值則無兼容性問題，

 style 
 .box{
 background-color: pink;
 height: 450px; 
 position: relative; 
 overflow: hidden; 
 .box .con-box{
 position: relative;
 width: 300px;
 height: 400px;
 margin: 0 auto;
 background-color: aqua;
 top:50%;
 margin-top: -200px

4 flex 水平垂直居中
 flex 主軸上居中，交叉軸上居中，flex 有很大的兼容性問題，一般用于移動(dòng)端，很簡單
 style 
 .box{
 background-color: pink;
 height: 450px; 
 display: flex;
 justify-content: center;
 align-items: center
 .box .con-box{
 width: 300px;
 height: 400px;
 background-color: aqua;

? ?總結(jié)?
 1.水平居中，能使用margin: 0 auto ,這最簡單的，不能的話就把子元素轉(zhuǎn)化成inline,然后使用text-aglin：center,無兼容性問題。
 上面達(dá)不到需求，可以考慮使用定位，移動(dòng)端能使用flex 就使用flex
 ? ?2. 垂直居中，單行文本，使用line-height 等于父元素高度，如果不行，就可以設(shè)置父元素display:table-cell，vertical-align: middle;
 能解決一大部分問題，如果還不行就考慮定位配合margin-top:-width/2，使用margin。移動(dòng)端能使用flex 就使用flex.
 如果您還有更好的方法，歡迎給我留言，共同學(xué)習(xí)，共同進(jìn)步。up