使用 CSS 垂直和水平对齐(居中和居中) [英] Vertical and horizontal align (middle and center) with CSS
本文介绍了使用 CSS 垂直和水平对齐(居中和居中)的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在练习 CSS,但我很困惑如何强制我的 div
元素居中(vertically
和 horizontally
)我的页面(指跨浏览器兼容性的方式)?
最好的问候!
解决方案
方法很多:
- 具有固定度量的元素的居中水平和垂直对齐
CSS
3.没有特定度量的元素的居中水平和垂直对齐
CSS
I am practicing CSS and I am so confused about how can I force my div
element to be center (vertically
and horizontally
) at my page (mean which way or ways for cross browser compatibility)?
Best regards!
解决方案 There are many methods :
- Center horizontal and vertical align of an element with fixed measure
CSS
<div style="width:200px;height:100px;position:absolute;left:50%;top:50%;
margin-left:-100px;margin-top:-50px;">
<!–content–>
</div>
2 . Center horizontally and vertically a single line of text
CSS
<div style="width:400px;height:200px;text-align:center;line-height:200px;">
<!–content–>
</div>
3 . Center horizontal and vertical align of an element with no specific measure
CSS
<div style="display:table;height:300px;text-align:center;">
<div style="display:table-cell;vertical-align:middle;">
<!–content–>
</div>
</div>
这篇关于使用 CSS 垂直和水平对齐(居中和居中)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文