整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
.水平居中的 margin：0 auto;
關于這個，大家也不陌生做網頁讓其居中用的比較多, 這個是用于子元素上的，前提是不受float影響
<style>
*{
padding: 0;
margin: 0;
}
.box{
width: 300px;
height: 300px;
border: 3px solid red;
/*text-align: center;*/
}
img{
display: block;
width: 100px;
height: 100px;
margin: 0 auto;
}
</style>
<!--html-->
<body>
<div class="box">
</div>
</body>我自己是一名從事了多年開發的web前端老程序員，目前辭職在做自己的web前端私人定制課程，去年我花了一個月整理了一份最適合2019年學習的web前端學習干貨，各種框架都有整理，送給每一位前端小伙伴，想要獲取的可以關注我的頭條號并在后臺私信我：前端，即可免費獲取。
2.水平居中 text-align：center；
img的display：inline-block；類似一樣在不受float影響下進行 實在父元素上添加效果讓它進行水平居中
<style>
*{
padding: 0;
margin: 0;
}
.box{
width: 300px;
height: 300px;
border: 3px solid red;
text-align: center;
}
img{
display: inline-block;
width: 100px;
height: 100px;
/*margin: 0 auto;*/
}
</style>
<!--html-->
<body>
<div class="box">
</div>
</body>3.水平垂直居中（一）定位和需要定位的元素的margin減去寬高的一半
這種方法的局限性在于需要知道需要垂直居中的寬高才能實現，經常使用這種方法
<style>
*{
padding: 0;
margin: 0;
}
.box{
width: 300px;
height: 300px;
background:#e9dfc7;
border:1px solid red;
position: relative;
}
img{
width: 100px;
height: 150px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -75px;
margin-left: -50px;
}
</style>
<!--html -->
<body>
<div class="box" >
</div>
</body>4.水平垂直居中（二）定位和margin:auto;
這個方法也很實用，不用受到寬高的限制,也很好用
<style>
*{
padding: 0;
margin: 0;
}
.box{
width: 300px;
height: 300px;
background:#e9dfc7;
border:1px solid red;
position: relative;
}
img{
width: 100px;
height: 100px;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
</style>
<!--html -->
<body>
<div class="box" >
</div>
</body>5.水平垂直居中（三）絕對定位和transfrom
這個方法比較高級了，用到了形變，據我所知很多大神喜歡使用這個方法進行定位，逼格很高的，學會后面試一定要用！這個是不需要知道居中元素的寬高就可以使用的，代碼里的圖片稍微有點大，改改寬高，僅此而已，在面試中大部分人會問如果不知道寬高該如何居中，答這個，加分！對transform不了解的同學可以查閱一下資料了解一下！
<style>
*{
padding: 0;
margin: 0;
}
.box{
width: 300px;
height: 300px;
background:#e9dfc7;
border:1px solid red;
position: relative;
}
img{
width: 100px;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
</style>
<!--html -->
<body>
<div class="box" >
</div>
</body>6.水平垂直居中（四）diplay：table-cell
其實這個就是把其變成表格樣式，再利用表格的樣式來進行居中，很方便
<style>
.box{
width: 300px;
height: 300px;
background:#e9dfc7;
border:1px solid red;
display: table-cell;
vertical-align: middle;
text-align: center;
}
img{
width: 100px;
height: 150px;
/*margin: 0 auto;*/ 這個也行
}
</style>
<!--html -->
<body>
<div class="box" >
</div>
</body>7.水平垂直居中（五）flexBox居中
這個用了C3新特性flex,非常方便快捷，在移動端使用完美，pc端有兼容性問題，以后會成為主流的
<style>
.box{
width: 300px;
height: 300px;
background:#e9dfc7;
border:1px solid red;
display: flex;
justify-content: center;
align-items:center;
}
img{
width: 150px;
height: 100px;
}
</style>
<!--html -->
<body>
<div class="box" >
</div>
</body>8.水平垂直居中（六）利用vertical-align:middle;
這方法不常見，但是一位朋友補充后我覺得也不失為一種好方法可以讓別人刮目相看，這個方法關鍵要有一個和容器一樣高的元素作為居中的一個參照就像b元素一樣
<style>
.wrap{
width:300px;
height:300px;
background:rgba(0,0,0,0.5);
text-align:center;
font-size:0;
}
.vamb{
display:inline-block;
width:0px;
height:100%;
vertical-align:middle;
}
.test{
display:inline-block;
vertical-align:middle;
font-size:16px;
text-align:left;
background:red;
}
</style>
<body>
<div class="wrap">
<b class="vamb"></b>
<div class="test">
寬高不定<br>
垂直水平居中
</div>
</div>
</body>常見又實用的例子就先寫到這，歡迎提意見，謝謝大家！喜歡請關注點個贊，也是對我的支持和鼓勵！
作者：coderLfy鏈接：https://www.jianshu.com/p/a7552ce07c88
TML ul li 橫排居中排列的方法，三步驟及實例
無序列表的列表項默認情況下是豎著排的，因為li元素是塊級元素，會自動分行。那如果要將列表的列表項進行橫排，比用無序列表ul元素定義一個導航條。那該怎么辦呢？這當中有三個應當被解決的東西，一個是橫排本身，另一個就是應當把無序列表項的圓點去掉，第三則是讓ul定義的列表居中顯示，包括水平居中和垂直居中。方法如下：
HTML ul li 橫排居中排列的方法，三步驟及實例
將ul無序列表元素中的列表項li元素的display屬性設置成inline或inline-block，個人比較常用的是后者：
ul li{display:inline-block;}
水平居中方法：只要將ul元素包含于一個div元素，并將div元素的text-align屬性設置為center即可將ul水平居中。除此之外，因為ul的列表默認情況下是有左內邊距的，所以，為了能夠讓列表能夠更好地水平居中，需要將ul的左內邊距padding-left設置為0，具體可見下方的綜合實例。
垂直居中方法：為包含ul元素的div元素設置寬度width和高度height（實際上導航條一般也需要有寬度和高度的設置），然后將ul的line-height屬性設置為父元素的高度height即可。
將ul元素的list-style屬性設置為none即可。
HTML ul li 橫排居中排列的方法，三步驟及實例
<div class='e1'>
<ul class='e2'>
<li>HTML</li>
<li>python</li>
<li>golang</li>
</ul>
</div>
<style>
.e1{width:100%;height:50px;border:1px solid skyblue;text-align:center;}
.e2{list-style:none;padding-left:0%;}
.e2 li{line-height:50px;display:inline-block;}
</style>HTML ul li 橫排居中排列的方法，綜合實例在線 - HTML教程
如上代碼，一定要將ul的左內邊距padding-left設置為0，否則ul列表的“水平居中”將偏向右邊，大家可以將.e2中的padding-left刪除掉，然后再在線運行看一看效果。
笨鳥工具-璞玉天成，大器晚成
要： flexbox是個很強大的布局模塊，三個屬性就搞定居中，而且不論父容器還是居中元素都可以不定寬高
水平居中
align="center"
直接在標簽對象內加align="center"即可讓對象內圖片橫向水平居中顯示
align="center"使用方法：
<div align="center">aaa</div>
點擊并拖拽以移動
text-align:center
<style> .divcss5{text-align:center} </style> <div class="divcss5">aaa</div>
點擊并拖拽以移動
text-align是針對父元素進行設置,只能對圖片，按鈕，文字等行內元素(display為inline或inline-block等)起作用，起作用的首要條件是子元素必須沒有被float影響。但要說明的是在IE6、7這兩個奇葩的瀏覽器中，它是能對任何元素進行水平居中的
把margin設為auto
具體來說就是把要居中的元素的margin-left和margin-right都設為auto，此方法只能進行水平的居中，且對浮動元素或絕對定位元素無效
<style> body{ text-align:center} .div{ margin:0 auto;} </style> <div class="div">aaa</div>
點擊并拖拽以移動
使用display:table-cell來居中
表格中只要用到 td(或 th)元素的 align="center" 和 valign="middle" 這兩個屬性就可以完美處理,而且表格默認對它里面的內容進行垂直居中。在css中控制表格內容的居中可以使用 vertical-align:middle，至于水平居中，css中沒有相對應的屬性的,但在IE6、7中可以用text-align:center對表格里的元素設置，IE8+及谷歌、火狐等的text-align:center只對行內元素起作用，對塊狀元素無效
對于不是表格的元素，可以通過display:table-cell 來模擬成一個表格單元格，這樣就可以利用表格很方便的居中特性了
<div style="display:table-cell;width:200px;height:200px;border:1px solid #ccc;"> <div>aaa</div> </div>
點擊并拖拽以移動
使用絕對定位來進行居中
此法只適用于那些我們已經知道它們的寬度或高度的元素。
絕對定位進行居中的原理是通過把絕對定位元素的left屬性設為50%,此時元素并不居中，而是比向右偏了這個元素寬度的一半，需要使用一個負的margin-left把它拉回到居中的位置，這個負的margin值就取元素寬度的一半
使用這個方法的好處在于無論你是什么形式的內容都可以馬上居中，而缺點就是必須對元素有確定的寬高值，否則的話可能就需要通過javascript來進行一些小計算了
<style> .child{width:100px;height:100px;position:absolute;left:50%;margin-left:-50px;} </style> <div class="parent"> <div class="child">aaa</div> </div>
點擊并拖拽以移動
利用盒模型實現水平居中--padding填充
margin
絕對居中
<style> .Center {width:100px; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; } </style> <div class="Center">aaa</div>
點擊并拖拽以移動
優點：支持跨瀏覽器，包括IE8-IE10。無需其他特殊標記，CSS代碼量少。支持百分比%屬性值和min-/max-屬性。只用這一個類可實現任何內容塊居中。不論是否設置padding都可居中（在不使用box-sizing屬性的前提下）。內容塊可以被重繪。完美支持圖片居中。
缺點：必須聲明寬度。建議設置overflow:auto來防止內容越界溢出。在Windows Phone設備上不起作用。
使用浮動配合相對定位來進行水平居中
<style> .parent{width:300px;height:200px;border:1px solid red;} .wraper{float:left;position:relative;left:50%;clear:both;} .child{border:1px solid blue;position:relative;left:-50%;white-spave:nowrap;} </style> <div class="parent"> <div class="wraper"> <div class="child">aaa</div> </div> </div>
點擊并拖拽以移動
這個是浮動元素水平居中的解決方法，且我們不需要知道元素的寬度
浮動居中的原理是：把浮動元素相對定位到父元素寬度50%的地方后需要他里面的子元素再用一個相對定位，把那多出的自身一半的寬度拉回來，而因為相對定位正是相對于自身來定位的，所以自身一半的寬度只要把left 或 right 設為50%就可以得到了，因而不用知道自身的實際寬度是多少
優點是不用知道要居中的元素的寬度，即使這個寬度是不斷變化的也行；缺點是需要一個多余的元素來包裹要居中的元素
使用button標簽
???????
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
