整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
able + margin 實現水平方向居中, table-cell + vertical-algin 實現垂直居中
者：薔薇Nina
原文：https://www.cnblogs.com/wcwnina/p/11297630.html
在CSS里，標簽位置居中一直是困擾Web前端的難題。在本文中，我對這類問題進行了探究和給出了幾點建議，供讀者參考。
在父級標簽中使用 text-align: center。
效果：
如果是單行，則為該標簽設置行高（line-height）且與其父級標簽 height 相等即可。
效果：
如果是多行，稍微有點麻煩，需要在該標簽設置 display: table-cell 和 vertical-align: middle，在其父級標簽設置 display: table。
效果：
方法一：在父級標簽中使用 flex 彈性盒子。
效果：
方法二：在該標簽中使用 margin 屬性。
效果：
在父級標簽中使用 flex 彈性盒子。
效果：
總結：對于行內標簽居中，優先考慮文本對齊（text-align）和顯示單元格（table-cell）；對于塊標簽居中，優先考慮顯示彈性盒子（flex）。
、對于行內元素：
text-align:center;
二、對于確定寬度的塊級元素：
（1）margin和width實現水平居中
常用(前提：已設置width值)：margin-left:auto; margin-right:auto;
（2）絕對定位和margin-left: -(寬度值/2)實現水平居中
固定寬度塊級元素水平居中，通過使用絕對定位，以及設置元素margin-left為其寬度的一半
.content{
width: 200px;
position: absolute;
left: 50%;
margin-left: -100px; // 該元素寬度的一半，即100px
background-color: aqua;
}
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
