1.用inline-block和vertical-align來實現居中：這種方法適合於未知寬度高度的情況下。
lang="en">
charset="utf-8">
titletitle>
#container
#container
:before
#center-div
style>
head>
id="container">
id="center-div">
***div>
div>
body>參考：
2.用相對絕對定位和負邊距實現上下左右居中：高度和寬度已知
lang="en">
charset="utf-8">
testtitle>
.div2
.img2
style>
head>
class="div2">
class="img2"
src="images/hongbao.png">
div>
body>
html>其實第二種要理解不能，首先相對父元素top，left定位在50%的位置，這時候只是左上角居中，而中心點還沒居中，加上margin: -100px 0 0 -100px;利用負邊距把的中心點位於父元素的中心點，從而實現垂直水平居中
3.利用絕對定位來實現居中：適合高度，寬度已知的情況。
lang="en">
charset="utf-8">
titletitle>
#container
#center-div
style>
head>
id="container">
id="center-div">
***div>
div>
body>
html>4.使用table-cell，inline-block實現水平垂直居中：適合高度寬度未知的情況
lang="en">
charset="utf-8">
titletitle>
#container
#center-div
style>
head>
id="container">
id="center-div">
***div>
div>
body>
html>5.使用css3中的transform來時實現水平垂直居中：適合高度寬度未知的情況
lang="en">
charset="utf-8">
titletitle>
#container
#center-div
style>
head>
id="container">
id="center-div">
***div>
div>
body>
html>還可以使用flexbox來實現水平垂直居中；適合寬度高度未知情況，但是要注意相容性
lang="en">
charset="utf-8">
titletitle>
#p_2
style>
head>
id="p_2">
id="c_2">
******x
div>
div>
body>
html>
用css實現水平居中和垂直居中
1.行內元素 inline性質 可以使用 text align center 2.單個塊級元素 margin left和margin right為auto margin 0 auto 3.多個塊級元素 設定不同的display屬性，設定為inline block，乙個是設定為flexbox 或mar...
css實現水平居中 垂直居中 垂直水平居中布局
1.只需要把行內元素包裹在乙個屬性display為block的父層元素中，並為父層元素新增如下屬性即可 parent2.塊狀元素解決方案 item3.多個塊狀元素解決方案將元素的display屬性設定為inline block，並且把父元素的text align屬性設定為center即可 paren...
CSS實現垂直水平居中的幾種方式
container是指外邊大盒子，center是指需要居中的小盒子，第一種方式 container寬高已知和container高已知的情況下 第一種 container center container寬高已知 直接通過最簡單的margin，先讓他右移container的一半，再左移自己的一半，垂直...