HTML中元素居中要注意哪些事項

這篇文章主要講解了“HTML中元素居中要注意哪些事項”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“HTML中元素居中要注意哪些事項”吧！

　　不使用定位

　　水平居中：text-align=center;（可繼承）

　　豎直居中：margin:0auto;(塊級元素)

　　其他居中：

      1.文字居中：父元素設置高子元素設置高line-height=height(父元素)

　　2.圖片居中：vertical-aign：middle;<--必須放在圖片元素中

　　.first{

　　width:300px;

　　height:100px;

　　background-color:black;

　　color:white;

　　text-align:center;

　　margin:0auto;//針對塊級元素

　　}

　　<divclass="first">

　　不使用定位（1）

　　</div>

　　.second{

　　width:300px;

　　height:100px;

　　background-color:green;

　　}

　　.s_child{

　　width:150px;

　　line-height:100px;

　　}

　　<divclass="second">

　　<divclass="s_child">

　　不使用定位（2）

　　</div>

　　</div>

　　2.定位居中

　　a.父元素高度固定

　　父元素：相對定位

　　子元素：絕對定位

　　top:50%（父元素高度的一半）

　　left:50%

　　margin-top:自己的高度一半；（加負號）

　　margin-left:自己寬度的一半；（加負號）

　　.dw_one{

　　width:600px;

　　height:300px;

　　position:absolute;

　　background:black;

　　}

　　.dw_one_child{

　　background:white;

　　position:relative;

　　width:50px;

　　height:50px;

　　top:50%;

　　left:50%;

　　margin-top:-25px;

　　margin-left:-25px;

　　}

　　<divclass="dw_one">

　　<divclass="dw_one_child">

　　a

　　</div>

　　</div>

　　b.父元素高度不固定

　　.wrapper{

　　width:600px;

　　height:600px;

　　}

　　.dw_two{

　　width:100%;

　　height:100%;

　　position:absolute;

　　background:black;

　　}

　　.dw_two_child{

　　background:white;

　　position:relative;

　　top:50%;

　　left:50%;

　　width:100px;

　　height:100px;

　　transform:translate(-50%,-50%);

　　-moz-transform:translate(-50%,-50%);

　　-ms-transform:translate(-50%,-50%);

　　-o-transform:translate(-50%,-50%);

　　-webkit-transform:translate(-50%,-50%);

　　}

　　<divclass="wrapper">

　　<divclass="dw_two">

　　<divclass="dw_two_child">

　　a

　　</div>

　　</div>

　　</div>

　　3.關于多行文本的居中

　　使用display:table;display:table-cell;

　　vertical-align:middle;居中

　　#outer{

　　width:200px;

　　height:200px;

　　background:#cccccc;

　　display:table;

　　_position:relative;//"_"為了兼容IE6

　　}

　　#inner{

　　display:table-cell;

　　vertical-align:middle;

　　_position:absolute;

　　_top:50%;

　　}

　　#content{

　　_position:relative;

　　_top:-50%;

　　}

　　<divid="outer">

　　<divid="inner">

　　<divid="content">

　　</div>

　　</div>

　　</div>

感謝各位的閱讀，以上就是“HTML中元素居中要注意哪些事項”的內容了，經過本文的學習后，相信大家對HTML中元素居中要注意哪些事項這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！