HTML+CSS有哪些常用的居中方法？

01-05

HTML有什麼常用垂直居中方法？？最好自適應內容變化

請學會使用搜索引擎。

//更新

水平垂直居中問題：

//方式1定位1 xx { position: absolute; top: 50%; left: 50%; width: x; height: y; margin: -y/2 0 0 -x/2; } //方式1定位2 xx { position: absolute; top: 50%; left: 50%; width: x; height: y; transform: translate(-50%, -50%); //好處是不用知道元素高度 } //方式1定位3 xx { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: x; height: y; margin: auto; //關鍵屬性 } //方式2 - 未知元素垂直居中方式 xx-Parent:after { //xx的父級元素的after width: 1px; height: 100%; content: ""; display: inline-block; vertical-align: middle; margin-right: -1px; } xx { vertical-align: middle; display: inline-block; }

一般定位無非那麼幾種：

1.text-align:center;line-height: XXpx;不過只是針對行間元素的；

2.最常用的就是通過定位實現：給要垂直居中的元素的直接父元素加上position:relative;給垂直居中的元素加上position:absolute;然後通過top:50%,left:50%;margin-left：-(寬度/2)px;margin-left:-(高度/2)px;來實現的；

3.第三種是拓展思路用的：要給一個元素居中可以先給這個元素包一層div:

& &要居中的元素& &

給class為wrapper的div添加空白的文本：

.wrapper:before { content:" "; text-align:center;} span { position: absolute; margin-left: -(寬度/2)px;}

這個方法利用了absolute的跟隨特性。

4.是利用flex布局，可以用在手機端，pc端兼容不好：

display: flex; justify-content: center; align-items: center;

5. translate

display:-webkit-box;

-webkit-box-orient:vertical;

-webkit-box-pack:center;

大概這樣，下班路上，手機打的～～～

div可以使用vertical-align：middle

文字類的可以設置line-height和div等寬

本人比較常用的就這兩個

不用谷歌至少會用百度吧，比這問效率更高

display:table； table－cell；

太多了，，，卧槽，，，，，

自己百度吧

谷歌歡迎你。

display: flex; justify-content: center; align-items: center;

關於這個問題我結合自己日常的開發經驗，在自己的博客文章中做了一個總結，詳見這裡：

總結html中水平居中的方案 | 馬齡陽的個人網站

以及：

總結html中垂直居中的方案 | 馬齡陽的個人網站

空白標籤實現垂直居中對齊

題主，百度輸入框裡面放什麼我都給你打好了。。。

Centering in CSS: A Complete Guide

父元素 relative 元素absolute top:50%;left:50%;transform:translate(-50%,-50%);

我猜你是用vertical-align:middle;然後不管用吧～

其實使用vertical-align是有條件的：

1.針對display為inline或者inline-block；

2.vertical-align是限制自己垂直居中，不是針對子元素。

table cell也是可以垂直居中的。

詳細介紹請谷歌～

手敲中英文好累啊

line height

margin auto top等0

table

top 50% 跟個那啥-50%

其實很簡單，用一個 table 即可實現。

把 table 的尺寸設為滿屏，加一個單元格&&（垂直居中的元素放這兒）&&，&加以下屬性

&

不喜歡用屬性的話，也可以用css

text-align: center; vertical-align: middle;