五種垂直居中方法 百度總結

垂直居中

水平垂直居中

一  絕對定位與負邊距

doctype html

>
<
html
>
<
head
>
<
meta 
charset
="utf-8"
>
<
title
>絕對定位與負邊距
title
>
<
style
>
.box 
.child 
style
>
head
>
<
body
>
<
div 
class
="box"
>
<
div 
class
="child"
>蝸牛小
div>
div>
body
>
html
>

>使用絕對定位和transform

title

>

<

style

>

.box

.child

style

>

head

>

<

body

>

<

div

class

="box"

>

<

div

class

="child"

>

蝸牛小蝸牛小蝸牛小

div>

div>

body

>

html

>

三  絕對定位結合margin: auto

>絕對定位結合margin: auto

title

>

<

style

>

.box

.child

style

>

head

>

<

body

>

<

div

class

="box"

>

<

div

class

="child"

>蝸牛小蝸牛小

div>

div>

body

>

html

>

四  使用flex布局

doctype html

>
<
html
>
<
head
>
<
meta 
charset
="utf-8"
>
<
title
>使用flex布局
title
>
<
style
>
.box 
.child 
style
>
head
>
<
body
>
<
div 
class
="box"
>
<
div 
class
="child"
>
蝸牛小蝸牛小
div>
div>
body
>
html
>

doctype html

>
<
html
>
<
head
>
<
meta 
charset
="utf-8"
>
<
title
>使用 line-height 和 vertical-align 對進行垂直居中
title
>
<
style
>
.box
.box img 
style
>
head
>
<
body
>
<
div 
class
="box"
>
<
img 
src="tip.png"
alt="請新增"
>
div>
body
>
html
>

angular 居中 垂直居中方法總結

box position absolute margin auto top 0px right 0px bottom 0px left 0px width 100 height 30 background color red text align center 第一種的好處是不用知道垂直居中的元素的...

垂直水平居中方法總結

今天老大隨口問了這個問爛了的問題，我只回答了兩種，好吧，還是老老實實總結下來加強下記憶吧。一 定位 邊距 固定寬高度適用 container inner 複製 container inner 複製 二 定位 transform 不固定寬高也適用 container inner 複製 三 flex布局...

元素垂直居中方法總結

以下總結了一些常見的元素垂直居中方法 首先，基本的html和css為 wrap wrap div 我是前端狗 方法 方案一 絕對定位負margin50 方法 wrap v center 方案一 優化版 利用calc支援單位運算，致命缺點uc這2貨嗝屁了，國內移動端別想了 v center 方案一 再...