表格內文居中css
#class td /*設置表格文字左右和上下居中對齊*/
{
vertical-align: middle;
text-align: center;
單行文本垂直居中
對於單行文本，咱們只須要將文本行高(line-height)和所在區域高度(height)設爲一致便可：html
<!--html代碼-->
<div id="div1">
這是單行文本垂直居中
</div>
/*css代碼*/
#div1{
width: 300px;
height: 100px;
margin: 50px auto;
border: 1px solid red;
line-height: 100px; /*設置line-height與父級元素的height相等*/
text-align: center; /*設置文本水平居中*/
overflow: hidden; /*防止內容超出容器或者產生自動換行*/
}
多行文本垂直居中
多行文本垂直居中分爲兩種狀況，一個是父級元素高度不固定，隨着內容變化；另外一個是父級元素高度固定。css3
父級元素高度不固定web
父級高度不固定的時，高度只能經過內部文原本撐開。這樣，咱們能夠經過設置內填充（padding）的值來使文本看起來垂直居中，只需設置padding-top和padding-bottom的值相等：瀏覽器
<!--html代碼-->
<div id="div1">
這是多行文本垂直居中，
這是多行文本垂直居中，
這是多行文本垂直居中，
這是多行文本垂直居中。
</div>
/*css代碼*/
#div1{
width: 300px;
margin: 50px auto;
border: 1px solid red;
text-align: center; /*設置文本水平居中*/
padding: 50px 20px;
}
父級元素高度固定
本文一開始就提到css中的vertical-align屬性，可是它只對擁有valign特性的元素才生效，結合display: table;，可使得div模擬table屬性。所以咱們能夠設置父級div的display屬性：display: table;；而後再添加一個div包含文本內容，設置其display:table-cell;和vertical-align:middle;。具體代碼以下：markdown
<!--html代碼-->
<div id="outer">
<div id="middle">
這是固定高度多行文本垂直居中，
這是固定高度多行文本垂直居中，
這是固定高度多行文本垂直居中，
這是固定高度多行文本垂直居中。
</div>
</div>
/*css代碼*/
#outer{
width: 400px;
height: 200px;
margin: 50px auto;
border: 1px solid red;
display: table;
}
#middle{
display:table-cell;
vertical-align:middle;
text-align: center; /*設置文本水平居中*/
width:100%;
}
子div垂直居中
一、根據子div具體大小設置偏移佈局
若是子div固定大小，設定水平和垂直偏移父元素的50%，再根據實際長度將子元素向上和向左挪回一半大小post
<!--html代碼-->
<div id="outer">
<div id="middle">
子div(固定大小)垂直居中
</div>
</div>
/*css代碼*/
#outer{
background-color: #13CDF4;
width: 300px;
height: 200px;
position: relative;
}
#middle{
background-color: #E41627;
width: 100px;
height: 100px;
margin: auto;
position: absolute;
left: 50%;
top: 50%;
margin-left: -50px;
margin-top: -50px;
二、利用translateflex
針對第一種方法中水平和垂直偏移父元素的50%後，不設置margin值，而是利用除css3中的transform屬性設置translate的值，css代碼部分改爲以下：spa
#middle{
background-color: #E41627;
width: 100px;
height: 100px;
margin: auto;
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
}
這種方法須要注意transform是css3中的屬性，使用時注意瀏覽器的兼容性，IE9以前的版本不支持。
三、利用絕對佈局absolute
<!--html代碼-->
<div id="outer">
<div id="middle">
利用絕對定位實現子div大小不固定垂直居中
</div>
</div>
/*css代碼*/
#outer{
background-color: #13CDF4;
width: 300px;
height: 200px;
position: relative;
}
#middle{
background-color: #E41627;
width: 100px; //子div大小可隨意設置
height: 100px;
margin: auto;
position: absolute;
top: 0;left: 0;right: 0;bottom: 0;
}
四、利用vertical-align
<!--html代碼-->
<div id="outer">
<div id="middle">
利用vertical-align屬性實現子div大小不固定垂直居中
</div>
</div>
/*css代碼*/
#outer{
background-color: #13CDF4;
width: 300px;
height: 200px;
display: table-cell;
vertical-align: middle;
}
#middle{
background-color: #E41627;
width: 100px;
height: 100px;
margin: 0 auto;
}
這種方法是將div轉變成table-cell顯示，而後經過vertical-align: middle;再設置其子元素垂直居中，這種方法和上面設置父級元素高度固定時多行文本居中的方法同樣，因此這種方法也不能兼容IE七、IE6。若是須要兼容IE七、IE6，能夠參照上面的代碼，上面設置父級元素高度固定時多行文本居中的方法其實就是將最裏面的div垂直居中。這裏我就不重述了。
五、利用display: flex
<!--html代碼-->
<div id="outer">
<div id="middle">
利用display: flex實現子div大小不固定垂直居中
</div>
</div>
/*css代碼*/
#outer{
background-color: #13CDF4;
width: 300px;
height: 200px;
display: flex;
justify-content: center;/*實現水平居中*/
align-items:center; /*實現垂直居中*/
}
#middle{
background-color: #E41627;
width: 100px;
height: 100px;
}
這種方法只須要在父級div中加上這三句話就行，可是在IE中兼容性很差，IE9及如下IE瀏覽器版本都不支持。