css水平垂直居中三種實現方法

2021-08-11 07:25:28 字數 1078 閱讀 4503

方法一:使用dispaly:inline-block 和 vertical-align 還有偽類實現

.block1

.block1

:before

.center1

方法二:使用相對定位或者固定定位和transform來實現。(ie8及以下不支援)

.block2

.center2

方法三:使用display:table和table-tell和vertical-align來實現。(ie8及以下不支援)

.block3

.center3

以上三個的html

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>

css水平垂直居中三種實現方法

方法一 使用dispaly inline block 和 vertical align 還有偽類實現 block1 block1 before center1 方法二 使用相對定位或者固定定位和transform來實現。ie8及以下不支援 block2 center2 方法三 使用display t...

css水平垂直居中 三種最常用的方式

在下面,可以直接用。bb兩句,個人見解 text align 是讓裡面的內容水平居中 line height 是行高,行高等於元素的高度 就能讓內容垂直居中 left和top 50 是根據html 來定位的,只能讓元素的左上頂點,也就是這個 要達到想到的位置,就要減去自身寬高的一半。margin l...

三種方法實現垂直水平居中詳解

即display flex 首先看看html布局 class wrap class content div div content通常是指需要垂直水平居中的元素 wrap就是它的父元素 設定父元素display flex成為乙個彈性盒子 justify content center設定其子元素水平居...