你當前所在位置:首頁 > IT技術探討 > css技巧|實現元素水平和垂直同時居中的四種方法

css技巧|實現元素水平和垂直同時居中的四種方法

在前端界面CSS布局中,實現元素的水平和垂直同時居中的方法是經常會用到的技巧。這個技巧其實不難,但許多初學前端的朋友還不是很懂,這里給初學前端的朋友介紹下元素水平和垂直同時居中的四種方法。

 

CSS元素水平和垂直同時居中的技巧.jpg

 

 

1. margin或padding配合調整


由儉入奢,第一種方法是最基礎也是比較局限的,就是用margin和padding配合調整,按已知的大小去控制間距:

 

1

.parent {

    width: 200px;

    height: 200px;

    background-color: #ADD8E6;

    padding: 50px 0;  /* (200-100)/2 上下各50px*/

    box-sizing: border-box;

}

.son {

    width: 100px;

    height: 100px;

    background-color: #DB7093;

    margin: 0 auto;  /*水平居中*/

}

2

3

4

5

6

7

8

9

10

11

12

13

 

2. 定位調整


升級一下,用定位解決。父元素relative相對定位,子元素absolute絕對定位,上左各50%,再用margin-top、margin-left負值調整。

 

1

.parent {

    width: 200px;

    height: 200px;

    background-color: #ADD8E6;

    position: relative;  /*相對定位*/

}

.son {

    width: 100px;

    height: 100px;

    background-color: #DB7093;

    position: absolute;  /*絕對定位*/

    top: 50%;

    left: 50%;

    margin-top: -50px;  /*返回一半的高度*/

    margin-left: -50px;  /*返回一半的寬度*/

}

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

 

3. css3動畫調整


這個方法跟上一個雷同,優點在于代碼量少一行和不需要計算數值。同樣的,父元素relative相對定位,子元素absolute絕對定位,上左各50%,然后用css3的translate(-50%, -50%)在x、y軸上各返回本身的一半位移。

 

1

.parent {

    width: 200px;

    height: 200px;

    background-color: #ADD8E6;

    position: relative;  /*相對定位*/

}

.son {

    width: 100px;

    height: 100px;

    background-color: #DB7093;

    position: absolute;  /*絕對定位*/

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%); /*x、y軸返回元素一半的位移*/

}

2

3

4

5

6

7

8

9

10

11

12

13

14

15

 

4. flex彈性布局調整


最后一種方法個人覺得是較高級的寫法。html5提供了廣受開發者喜愛的flex彈性布局屬性,功能十分強大實用。要實現元素水平垂直居中,只要父元素設置彈性布局,用justify-content和align-items屬性調整主軸、副軸上居中。

 

1

.parent {

    width: 200px;

    height: 200px;

    background-color: #ADD8E6;

    display: flex;  /*彈性布局*/

    justify-content: center;  /*子元素水平居中*/

    align-items: center;  /*子元素垂直居中*/

}

.son {

    width: 100px;

    height: 100px;

    background-color: #DB7093;

}

2

3

4

5

6

7

8

9

10

11

12

13

 


以上就是前端CSS布局中實現元素的水平和垂直同時居中的技巧,同學們多多練習,就能掌握啦!

課程預約

极速1分彩_Welcome