CSS（九） 設定盒子水平垂直居中

通過設定下面的樣式可以使盒子水平垂直居中：

效果：

示例：

doctype html

>設定盒子水平垂直居中
title
>
<
style 
type
="text/css"
>
*.bg
.opinion
.opinion h3
.opinion span
.opinion hr
.opinion em
.opinion p
.email,.content,.btnsubmit
.email,.content
.email
.content
.btnsubmit
style
>
head
>
<
body
>
<
div 
class
="bg"
>
div>
<
div 
class
="opinion"
>
<
h3>
<
span
>意見反饋
span
>
<
em class
="cllse"
>
em>
h3>
<
hr />
<
p>
親愛的使用者，歡迎來到gwiff，我們非常希望看到您對gwiff的看法，
以便將來更好的服務到您。
p>
<
div>
<
form 
action
=""method
="post"
id="myform"
>
<
input 
type
="text"
class
="email"
name
="email"
/>
<
textarea 
class
="content"
>
textarea
>
<
input 
type
="button"
value
="提 交"
class
="btnsubmit"
/>
form
>
div>
div>
body
>
html
>

css水平垂直居中設定

參考 水平居中 行內元素解決方案1 父層元素新增如下屬性即可 parent 水平居中 行內元素解決方案2 flex 水平居中 塊狀元素解決方案 self 水平居中 多個塊狀元素解決方案 將元素的display屬性設定為inline block，並且把父元素的text align屬性設定為center...

盒子垂直水平居中

1 定位 盒子寬高已知，position absolute left 50 top 50 margin left 自身一半寬度 margin top 自身一半高度 2 table cell布局 父級 display table cell vertical align middle 子級 margin...

盒子垂直水平居中

要設定內部盒子在外部盒子內垂直水平居中，可以有以下幾種做法 假設外部盒子為紅色，大小為10em 10em 內部盒子為黃色，大小為3em 3em。在調整位置之前，盒子情況如下 由於知道兩個盒子的大小，只要設定黃盒子的位置即可，首先設定黃盒子的position為absolute，再將黃盒子向右下方偏移紅...