純CSS使div垂直居中的幾種方法

絕對定位方法：不確定當前div的寬度和高度，採用 transform: translate(-50%,-50%); 當前div的父級新增相對定位（position: relative;）

<

!doctype html>
"en"
>
"utf-8"
>
水平垂直居中方式1
<
/title>
/*使用絕對定位，不確定子div的寬高，父元素需要新增position:relative*/
.father 
.son 
<
/style>
<
/head>
="father"
>
="son"
>hello simon<
/div>
<
/div>
<
/body>
<
/html>

<

!doctype html>
"en"
>
"utf-8"
>
水平垂直居中方式2
<
/title>
/*使用絕對定位，確定了子div的寬高，margin值為子div寬高的一半的負值*/
.father 
.son 
<
/style>
<
/head>
="father"
>
="son"
>hello simon<
/div>
<
/div>
<
/body>
<
/html>

<

!doctype html>
"en"
>
"utf-8"
>
水平垂直居中方式3
<
/title>
/*使用絕對定位，確定了子div的寬高，left、right、top、bottom都設定為0，margin設定為auto*/
.father 
.son 
<
/style>
<
/head>
="father"
>
="son"
>hello simon<
/div>
<
/div>
<
/body>
<
/html>

<

!doctype html>
"en"
>
"utf-8"
>
水平垂直居中方式4
<
/title>
/*使用flex布局，為父div新增flex布局樣式align-items和justify-content*/
.father 
.son 
<
/style>
<
/head>
="father"
>
="son"
>hello simon<
/div>
<
/div>
<
/body>
<
/html>

<

!doctype html>
"en"
>
"utf-8"
>
水平垂直居中方式6
<
/title>
.father 
.son 
<
/style>
<
/head>
<
!--絕對定位+
calc
()動態計算實現水平垂直居中--
>
="father"
>
="son"
>
hello simon
<
/div>
<
/div>
<
/body>
<
/html>

css中如何使div居中 垂直水平居中

如何使div居中,div垂直居中,div水平居中.主要的樣式定義如下 body center 說明 首先在父級元素定義text align center 這個的意思就是在父級元素內的內容居中 對於ie這樣設定就已經可以了。但在mozilla中不能居中。解決辦法就是在子元素定義時候設定時再加上 mar...

使div水平 垂直居中

將要設定居中的元素上 右 下 左 都設為0，再將margin值設為水平垂直居中 方法二 設定top和left為50 再設定margin top和left為負值 自己的一半 content 必須有position absolute position absolute top 50 left 50 wi...

純CSS實現垂直居中的幾種方法

垂直居中是布局中十分常見的效果之一，為實現良好的相容性，pc端實現垂直居中的方法一般是通過絕對定位，table cell，負邊距等方法。有了css3，針對移動端的垂直居中就更加多樣化。方法1 table cell html結構 垂直居中 方法2 display flex box2 方法3 絕對定位和...