垂直和水平对齐(中间和中间)与css

Question

我正在练习CSS,我很困惑,我怎么能强迫我的div元素在我的页面中心(垂直和水平)(意味着跨浏览器兼容性的方式或方式)？

最好的祝福 !

Answer 1

有很多方法:

1. 使用固定尺寸对元素进行水平和垂直对齐

CSS

 <div style="width:200px;height:100px;position:absolute;left:50%;top:50%;
margin-left:-100px;margin-top:-50px;">
<!–content–>
</div> 

2.水平和垂直居中一行文字

CSS

<div style="width:400px;height:200px;text-align:center;line-height:200px;">
<!–content–>
</div>  

3.中心水平和垂直对齐元素,没有特定的措施

CSS

<div style="display:table;height:300px;text-align:center;">
<div style="display:table-cell;vertical-align:middle;">
<!–content–>
</div>
</div>  

更多信息: CSS中的水平和垂直对齐