HTML行內元素水平居中的方法

本篇內容介紹了“HTML行內元素水平居中的方法”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

首先看它的父元素是不是塊級元素，如果是，則直接給父元素設置 text-align: center;

如果不是，則先將其父元素設置為塊級元素，再給父元素設置 text-align: center;

塊級元素水平居中(定寬度)：

1）需要誰居中，給其設置 margin: 0 auto; （作用：使盒子自己居中）

2) 首先設置父元素為相對定位，再設置子元素為絕對定位，設置子元素的left:50%，即讓子元素的左上角水平居中；

設置絕對子元素的 margin-left: -元素寬度的一半px; 或者設置transform: translateX(-50%);

塊級元素水平居中(不寬度)：

1) 默認子元素的寬度和父元素一樣，這時需要設置子元素為display: inline-block; 或 display: inline;即將其轉換成行內塊級/行內元素，給父元素設置 text-align: center;

2) 首先設置父元素為相對定位，再設置子元素為絕對定位，設置子元素的left:50%，即讓子元素的左上角水平居中；

利用css3新增屬性transform: translateX(-50%);

使用flexbox布局實現水平居中（寬度定不定都可以）:

使用flexbox布局，只需要給待處理的塊狀元素的父元素添加屬性 display: flex; justify-content: center;

單行的行內元素垂直居中:

只需要設置單行行內元素的"行高等于盒子的高"即可；

多行的行內元素垂直居中:

使用給父元素設置display:table-cell;和vertical-align: middle;屬即可；

塊級元素垂直居中方法一：使用定位

首先設置父元素為相對定位，再設置子元素為絕對定位，設置子元素的top: 50%，即讓子元素的左上角垂直居中；

定高度：設置絕對子元素的 margin-top: -元素高度的一半px; 或者設置transform: translateY(-50%);

不定高度：利用css3新增屬性transform: translateY(-50%);

塊級元素垂直居中方法二：使用flexbox布局實現（高度定不定都可以）

使用flexbox布局，只需要給待處理的塊狀元素的父元素添加屬性 display: flex; align-items: center;

水平垂直居中-已知高度和寬度的元素：

方法一：

設置父元素為相對定位，給子元素設置絕對定位，top: 0; right: 0; bottom: 0; left: 0; margin: auto;

方法二：

設置父元素為相對定位，給子元素設置絕對定位，left: 50%; top: 50%; margin-left: --元素寬度的一半px; margin-top: --元素高度的一半px;

“HTML行內元素水平居中的方法”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！