居中問題需要用到的方法。CSS沒有那么復(fù)雜困難不同的情景解決不一樣
居中是在中經(jīng)常被抱怨的問題之一。這個(gè)問題真的有這么難嗎？事實(shí)上這個(gè)問題并，它在于對(duì)于，居中問題需要用到的方法。CSS沒有那么復(fù)雜困難不同的情景解決不一樣,在這里，我們會(huì)一起建立來幫助大家來這個(gè)問題。
水平居中
行內(nèi)元素
display屬性為?或者?行內(nèi)元素?（例如：文本或者鏈接）inlineinline-*
如果你需要居中的在中，你可以使用下面方法。行內(nèi)元素塊級(jí)元素
.center-children {
text-align: center;
}
例子：傳送門
單個(gè) - 塊級(jí)元素
如果需要使得，可以利用和。塊級(jí)元素居中margin-leftmargin-right
.center-me {
margin: 0 auto;
}
例子：傳送門
注意：不能是一個(gè)浮動(dòng)的塊級(jí)元素哦~
多個(gè) - 塊級(jí)元素 - 同行居中
如果需要使得，這個(gè)時(shí)候用?可就不行啦，但是我們可以使用或者來實(shí)現(xiàn)居中。多個(gè)塊級(jí)元素居中magininline-blockflexbox
inline-block
適合一個(gè)父div中兩個(gè)子div居中
利用在中的居中方法，先讓的變?yōu)樾袃?nèi)元素，再對(duì)的使用居中。行內(nèi)元素塊級(jí)元素內(nèi)部塊級(jí)元素父級(jí)塊級(jí)元素
.center-parent {
text-align: center;
}
.center-parent .center-child{
display: inline-block;
}
例子
我是內(nèi)容文本1
我是內(nèi)容文本1
我是內(nèi)容文本1
flexbox
.center-parent {
display: flex;
justify-content: center;
}
例子：傳送門
多個(gè) - 塊級(jí)元素 - 同列居中
#####利用的方法,來實(shí)現(xiàn)的。單個(gè)塊級(jí)元素居中多個(gè)塊級(jí)元素垂直居中
.center-me {
margin: 0 auto;
}
例子：傳送門
垂直居中
單行 - 行內(nèi)元素
display屬性為?或者?行內(nèi)元素?（例如：文本或者鏈接）。可以利用或者來實(shí)現(xiàn)。inlineinline-*paddingline-height
padding
.text {
padding-top: 30px;
padding-bottom: 30px;
}
例子：傳送門
line-height （值和一樣）height
.text {
height: 100px;
line-height: 100px;
}
例子：傳送門
多行 - 行內(nèi)元素
對(duì)于多行，如果使用的方法，在換行之后，會(huì)出現(xiàn)錯(cuò)誤。這個(gè)時(shí)候可以利用的或者或者來實(shí)現(xiàn)。行內(nèi)元素單行表格vertical-alignflexbox偽類
vertical-align
.center-table {
display: table;
}
.center-table p {
display: table-cell;
vertical-align: middle;
}
例子：傳送門
flexbox
.center-flexbox {
display: flex;
justify-content: center;
flex-direction: column;
}
例子：傳送門
偽類
.center-parent {
position: relative;
}
.center-parent::before {
content: "";
display: inline-block;
height: 100%;
width: 1%;
vertical-align: middle;
}
.center-parent p {
display: inline-block;
vertical-align: middle;
}
例子：傳送門
塊級(jí)元素
元素高度知道
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
height: 100px;
margin-top: -50px; // 高度的一半
}
例子：傳送門
元素高度不知道
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
例子：傳送門
flexbox
.parent {
display: flex;
flex-direction: column;
justify-content: center;
}
例子：傳送門
垂直水平居中
寬度和高度知道(利用的高度知道)垂直居中塊級(jí)元素
.parent {
position: relative;
}
.child {
width: 200px;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
margin: -50px 0 0 -100px;
}
例子：傳送門
寬度和高度不知道(利用的高度不知道)垂直居中塊級(jí)元素
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
例子：傳送門
flexbox
.parent {
display: flex;
justify-content: center;
align-items: center;
}
