lang
="en"
>
>
charset
="utf-8"
>
name
="viewport"
content
="width=device-width, initial-scale=1.0"
>
>
documenttitle
>
>
.parent
.child
/* 居中關鍵**（必須知道內外盒子的大小） */
.center
style
>
head
>
>
class
="parent"
>
class
="child center"
>
div>
div>
body
>
html
>
lang
="en"
>
>
charset
="utf-8"
>
name
="viewport"
content
="width=device-width, initial-scale=1.0"
>
>
documenttitle
>
>
body
div/*居中關鍵***/
.box
style
>
head
>
>
class
="box"
>
div>
body
>
html
>
lang
="en"
>
>
charset
="utf-8"
>
name
="viewport"
content
="width=device-width, initial-scale=1.0"
>
>
documenttitle
>
>
div/*
* 居中關鍵** （需要知道盒子的高度和寬度）
*/.box
style
>
head
>
>
class
="box"
>
div>
body
>
html
>
lang
="en"
>
>
charset
="utf-8"
>
name
="viewport"
content
="width=device-width, initial-scale=1.0"
>
>
documenttitle
>
>
div/*居中關鍵***/
.box
style
>
head
>
>
class
="box"
>
div>
body
>
html
>
lang
="en"
>
>
charset
="utf-8"
>
name
="viewport"
content
="width=device-width, initial-scale=1.0"
>
>
documenttitle
>
>
/* * html和body需要撐滿瀏覽器
* 如果父盒子是div則不需要這段**
*/body,
html
/*居中關鍵***/
body
divstyle
>
head
>
>
class
="box"
>
div>
body
>
html
>
lang
="en"
>
>
charset
="utf-8"
>
name
="viewport"
content
="width=device-width, initial-scale=1.0"
>
>
documenttitle
>
>
/* * html和body需要撐滿瀏覽器
* 如果父盒子是div則不需要這段**
*/body,
html
div/*居中關鍵**1*/
body
/*居中關鍵**2*/
.box
style
>
head
>
>
class
="box"
>
div>
body
>
html
>
>
>
charset
="utf-8"
>
>
title
>
type
="text/css"
>
.parent
/* 居中關鍵** */
.center
.child
style
>
head
>
>
class
="parent center"
>
class
="child"
>
div>
div>
body
>
html
>
盒子水平垂直居中 3種方法
我用的三種方法，當然常用的還是通過彈性盒來實現，一般用於移動端的時候，另外兩種也可以，但在移動端使用彈性盒更方便，直接上 了。doctype html en utf 8 viewport content width device width,initial scale 1.0 document ti...
實現盒子水平垂直居中的10種方法
實現操作 父 子 缺點 需要知道子元素的寬高 優點 比較好理解，相容性好 實現操作 父 子 優點 相容性也很好 缺點 需要知道子元素的寬高 實現操作 父 子 詳解 這種方法top的百分比是基於元素的左上角，那麼在減去寬度與高度的一半就好了 calc 任何長度值都可以使用calc 函式進行計算 cal...
div盒子水平垂直居中的幾種方法
一 盒子沒有固定的寬和高 方案1 使用transforms屬性的translate平移 這是最簡單的方法，不僅能實現絕對居中同樣的效果，也支援聯合可變高度方式使用。我不知道我的高度和寬度是多少。transform translate 50 50 分別向左向上移動自身長寬的50 使其位於中心。二 盒子...