且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

垂直和水平对齐(中间和中心)的CSS

更新时间:2021-09-22 15:24:14

有许多方法:

  1. 中心的水平,并与固定措施的元件的垂直对齐

CSS

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


2。中心水平和文字的垂直一行


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。居中的元件的水平和垂直对准,没有特别的措施


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>  


这里更多: Horizontal和垂直对齐在CSS