1.常用居中方法
水平居中
子元素為行內(nèi)元素還是塊狀元素，寬度一定還是寬度未定丛版，采取的布局方案不同。下面進(jìn)行分析：
- 行內(nèi)元素：對(duì)父元素設(shè)置
text-align:center; - 定寬塊狀元素: 設(shè)置左右
margin:auto; - 不定寬塊狀元素: 設(shè)置子元素為display:inline,然后在父元素上設(shè)置text-align:center;
垂直居中
- 單行文本垂直居中：設(shè)置父元素的height等于行高line-height;
<div id="div1">
這是單行文本垂直居中
</div>
/*css代碼*/
#div1{
width: 300px;
height: 100px;
margin: 50px auto;
border: 1px solid red;
line-height: 100px; /*設(shè)置line-height與父級(jí)元素的height相等*/
text-align: center; /*設(shè)置文本水平居中*/
overflow: hidden; /*防止內(nèi)容超出容器或者產(chǎn)生自動(dòng)換行*/
}
- 多行文本垂直居中：
- 父級(jí)高度不固定的時(shí)，高度只能通過內(nèi)部文本來撐開洛史。這樣，我們可以通過設(shè)置內(nèi)填充（padding）的值來使文本看起來垂直居中酱吝，只需設(shè)置padding-top和padding-bottom的值相等：
<div id="div1">
這是多行文本垂直居中也殖，
這是多行文本垂直居中，
這是多行文本垂直居中，
這是多行文本垂直居中忆嗜。
</div>
/*css代碼*/
#div1{
width: 300px;
height: 100px;
margin: 50px auto;
padding: 20px 40px;
}
- 父級(jí)元素高度固定
設(shè)置父元素的display:table-cell或inline-block己儒，再設(shè)置vertical-align:middle;
- 塊狀元素：設(shè)置子元素
position:fixed（absolute），然后設(shè)置margin:auto;
<div id="outer">
<div id="middle">
利用絕對(duì)定位實(shí)現(xiàn)子div大小不固定垂直居中
</div>
</div>
//css
#outer{
width: 600px;
height: 600px;
background: red;
position: relative;
}
#middle{
position: absolute;
width: 200px;
height: 200px;
background: yellow;
margin: auto;
top: 0;left: 0;right: 0;bottom: 0;
}
通用方案: flex布局
給父元素設(shè)置{display: flex; align-items: center;}捆毫。
<div id="outer">
<div id="middle">
利用絕對(duì)定位實(shí)現(xiàn)子div大小不固定垂直居中
</div>
</div>
//css
#outer{
width: 600px;
height: 600px;
background: red;
display: flex;
align-items: center;
}
#middle{
width: 200px;
height: 200px;
background: yellow;
margin: auto;
}