元素水平垂直居中

只可用於定寬高元素；

doctype html

>
<
html 
lang
="en"
>
<
head
>
<
meta 
charset
="utf-8"
>
<
title
>垂直居中
title
>
<
style 
type
="text/css"
>
body
#parent
#container 
style
>
head
>
<
body
>
<
div 
id="parent"
>
<
div 
id="container"
>
<
p>我要用絕對定位水平垂直居中
p>
<
p>我要用絕對定位水平垂直居中
p>
<
p>我要用絕對定位水平垂直居中
父元素設定為：position: relative;
子元素設定為：position: absolute;
距上50%，據左50%，然後減去元素自身寬度的距離就可以實現top:50%;left:50%;margin:-height/2 0 0 -width/2;
>定寬塊狀元素水平居中
title
>
<
style
>
body
divp
style
>
head
>
<
body
>
<
div><
p>我是定寬塊狀元素，我要垂直水平居中顯示。
p>
div>
body
>
html
>

用法：

#child

doctype html

>
<
html 
lang
="en"
>
<
head
>
<
meta 
charset
="utf-8"
>
<
title
>垂直居中
title
>
<
style 
type
="text/css"
>
body
#parent
#container 
style
>
head
>
<
body
>
<
div 
id="parent"
>
<
div 
id="container"
>
<
p>我要用絕對定位水平垂直居中
p>
<
p>我要用絕對定位水平垂直居中
p>
<
p>我要用絕對定位水平垂直居中
有一定的bug,父元素會和子元素一般大，但是確實居中了；
定寬高和不定寬高元素皆可；
>垂直居中
title
>
<
style 
type
="text/css"
>
body
#container 
style
>
head
>
<
body
>
<
div 
id>
<
div 
id="container"
>
<
p>我要用**屬性垂直水平居中
p>
<
p>我要用**屬性垂直水平居中
p>
<
p>我要用**屬性垂直水平居中
定寬高和不定寬高元素皆可；
>定寬塊狀元素水平居中
title
>
<
style
>
body
divp
style
>
head
>
<
body
>
<
div><
p>我是定寬塊狀元素，我要垂直水平居中顯示。
p>
div>
body
>
html
>

【猿2048】www.mk2048.com

元素水平垂直居中

lang en charset utf 8 垂直居中示例title name viewport content width device width,initial scale 1 rel stylesheet href 可行，支援ie8 block1 block1 before center1 不...

元素水平垂直居中

給子元素設定以下內容 給父元素新增屬性 display flex align items center justify content center 先給元素設定絕對定位，再依次新增以下屬性，具體 如下所示。position absolute top 0 left 0 right 0 bottom ...

元素水平垂直居中

只可用於定寬高元素 doctype html html lang en head meta charset utf 8 title 垂直居中 title style type text css body parent container style head body div id parent d...