元素水平垂直居中

2021-07-28 21:02:14 字數 1120 閱讀 4044

lang="en">

charset="utf-8">

垂直居中示例title>

name="viewport"

content="width=device-width, initial-scale=1">

rel="stylesheet"

href="">

/*可行,支援ie8*/

.block1

.block1

:before

.center1

/*不支援ie8*/

.block2

.center2

/*此效果不行----這個看似居中了,實際沒有,寬度跟父類一樣,且不支援ie8*/

.block3

.center3

style>

head>

class="block1">

class="center1">

標題標題標題h4>

href="#">

src=""

alt="...">

a>

class="intro">簡介簡介簡介簡介簡介簡介簡介簡介簡介簡介簡介簡介簡介簡介簡介簡介簡介簡介簡介簡介div>

div>

div>

class="block2">

class="center2">

標題標題標題h4>

href="#">

src=""

alt="...">

a>

class="intro">簡介簡介簡介簡介簡介簡介簡介簡介簡介簡介簡介簡介簡介簡介簡介簡介簡介簡介簡介簡介div>

div>

div>

class="block3">

class="center3">

標題標題標題h4>

href="#">

src=""

alt="...">

a>

class="intro">簡介簡介簡介簡介簡介簡介簡介簡介簡介簡介簡介簡介簡介簡介簡介簡介簡介簡介簡介簡介div>

div>

div>

body>

html>

元素水平垂直居中

給子元素設定以下內容 給父元素新增屬性 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...

元素水平垂直居中

只可用於定寬高元素 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...