在样式布局中,通过CSS实现元素的水平居中,对于文本,对其父级元素设置text-align:center;对于div等块级元素,设置其left和right的margin值为auto;要实现文本和子div的垂直居中,可以通过以下方法:
一.实现文本垂直居中(单行/多行)
1.父级元素高度不设置,通过设置padding属性实现
- HTML代码:
<div id="center">设置文本垂直居中</div>
- CSS代码:
#center{width:600px;padding:120px;border:1px solid #464646;}
通过padding撑开高度,从而实现居中。
2.通过设置line-height
- HTML代码:
<div id="center">设置文本垂直居中</div>
- CSS代码:
#center{width:200px;height:400px;line-height:400px;border:1px solid #464646;}
设置line-height,实质上设置了行框,实现文本在行框中的居中,从而实现在div中的居中。
3.父级元素高度固定,通过设置vertical-align:middle
- HTML代码:
<div id="outer">
<div id="middle">设置文本垂直居中</div>
</div>
- CSS代码:
#outer{width:600px;height:200px;magin:50px auto;border:1px solid red;display:table;}
#middle{display:table-cell;vertical-align:middle;text-align:center;}
以上三种方法可用于多行文本,单行文本的垂直居中。
二.实现子div垂直居中
1.根据子div具体大小设置偏移
- HTML代码:
<div id="outer">
<div id="middle">实现子div垂直居中</div>
</div>
- CSS代码:
#outer{background-color:#7f7f7f;width:300px;height:200px;
position:relative;}
#middle{background-color:#5d5d5d;width:100px;height:100px;
margin:auto;position:absolute;left:50%;top:50%;
margin-left:-50px;margin-top:-50px;}
前提是在高度确定的情况下
2.根据absolute设置居中
- HTML代码:
<div id="outer">
<div id="middle">实现div垂直居中</div>
</div>
- CSS代码:
#outer{background-color:#e2e2e2;width:300px;height:200px;
position:relative;}
#middle{background-color:#A0A0A0;width:100px;height:200px;
argin:auto;position:absolute;top:0;left:0;right:0;
bottom:0;}
3.根据vertical-align来设置
- HTML代码:
<div id="outer">
<div id="middle">实现div垂直居中</div>
</div>
- CSS代码:
#outer{background-color:#CDCDCD;
width: 300px;
height:200px;
display: table-cell;
vertical-align: middle;}
#middle{background-color:#868686;
width: 100px;
height: 100px;
margin: 0 auto;}
4.根据display:flex实现居中
- HTML代码:
<div id="outer">
<div id="middle">实现div垂直居中</div>
</div>
- CSS代码:
#outer{background-color:#CBCBCB;
width: 300px;
height: 200px;
display: flex;
justify-content: center;
align-items:center;}
#middle{background-color:#898989;
width: 100px;
height: 100px;}