對於不是編輯中的代碼進行復制時，一定要注意：空格的復制可能會是整個HTML和樣式都顯示無效，需要刪除所有復制的空格才可以正常顯示，對於下面代碼的復制也一樣：
text-align:center 只對塊級元素有效，且是塊級元素內的內容水平居中，而不是整個塊級元素。
如果是想讓塊級元素水平居中，可在需要居中的塊級元素中添加margin:0 auto; 必須是固定寬度。
vertical-align:middle 只對行內元素有效 垂直居中 一行可以使用line-height=height.也可以垂直居中
當行高與元素的高度一致時，元素的內容會在垂直方向居中顯示；
設置height:100px; line-height沒有設置時，默認與當前字體大小一致。如果設置font-size:20px; 那么line-height:20px;要居中顯示，那么可寫：line-height:100px; 或者line-height:500%;
-----
在寫樣式時，一定記住先使用通配符統一不同瀏覽器的默認設置。
*{
margin:0px;
padding:0px;
font-size:16px;
}
一，單行（塊級元素的內容不超過一行：p,div,h1,h2等標簽）居中（左右居中，上下居中）
在塊級元素中設置，解決辦法：
1，line-height:該行的字體大小 //垂直居中
2，text-align:center;
----------------
<style type="text/css">
*{ /*統一設置不同瀏覽器的默認設置*/
margin: 0px;
padding: 0px;
}
.warp{
border: 1px solid red;
height: 200px;
}
p{
line-height: 200px;
text-align: center;
}
</style>
</head>
<body>
<div class="warp">
<p>路上看到<br/>房價收到非獨立開發建設勞動法</p>
</div>
</body>
=================================================
二，多行（多行中包括塊級元素）居中（左右居中，上下垂直居中）
在塊級元素中設置屬性，解決辦法：
在需要居中整個塊級元素中設置：
text-align:center;
把其父元素轉化成表格，表格的寬度是內容決定，所以這里需要把寬度設置為100%（有固定的寬度就不用設置）：
display:table;
width:100%;
把居中塊級元素轉化成表格的單元格：
display:talbe-cell;
表格的單元格是行內元素，所以可以使用垂直居中屬性(該屬性默認值：baseline)：
vertical-align:center;
如下代碼：
*{
margin: 0px;
padding: 0px;
}
.warp{
border: 1px solid red;
height: 400px;
display: table;
width: 100%;
}
.inner{
text-align: center; //先設置塊級元素居中，塊級元素居中才有效。再來轉化為表格的單元格 。
display: table-cell;
vertical-align: middle;
}
</style>
<div class="warp">
<div class="inner">
<img src="#" width="200px" height="100px">
<div>路上看到房價收到非獨/div></div>
<h2>數量的開發建設獨立開發</h2>
</div>
===========================================
使用position:relative; 和 position:absolute;來居中定位。
.partent{
width:500px;
height: 500px;
background: green;
position: relative; //子元素相對於本祖先元素居中顯示
}
.child{
width:100px;
height: 100px;
background: red;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto auto; //本元素相對於有relative的祖先元素上下左右垂直居中。
}
<div class="partent">
<div class="child"></div>
</div>
----
其他都不變，就變為：
只設置兩個偏移量，child標簽會相對reative標簽左右居中。
left: 0;
right: 0;
margin:auto; //本元素相對於有relative的祖先元素左右垂直居中。
只設置兩個偏移量，child標簽會相對reative標簽上下垂直居中。
top: 0;
bottom: 0;
margin:auto; //本元素相對於有relative的祖先元素上下垂直居中。
本標簽沒有設置寬高，把偏移量都設置為0，其他不設置，那么這個child標簽就會把relative這個祖先標簽填充滿。
top: 0;
left: 0;
bottom: 0;
right: 0;
-------------下面是居中實例：------------------
父元素使用position:relative;
子元素使用position:absolute;
如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
list-style-type: none;
border: none;
}
ul{
position: relative;
width: 100%;
height: 600px;
border: 1px solid red;
}
li{
position: absolute;
width: 300px;
height: 300px;
}
.two{
top: 40px; /*經測試：只要 top = bottom 且設置margin:auto; 則上下垂直居中。 */
right:44px; /*經測試： 只要 right = left 且設置margin:auto; 則左右垂直居中。*/
bottom: 40px;
left:10px;
margin: auto;/*居中顯示*/
border: 1px solid red;
}
</style>
</head>
<body>
<ul>
<li>111</li>
<li class="two">222</li>
<li>333</li>
</ul>
</body>
</html>
=====================================
單行居中：
height=line-height 上下垂直居中
text-align:center; 塊級元素內容左右居中
多行居中：
父元素設置 display:table. 且寬度固定
子元素設置 display:table-cell. vertical-align:middle;
定位居中一：
父元素設置position:relative;
子元素設置position:absolute; top:0; bottom:0; left:0; right:0; margin:auto auto;
其中如果只設置如下效果又不一樣：
left: 0;
right: 0;
margin: 0 auto; //本元素相對於有relative的祖先元素左右垂直居中。
top: 0;
bottom: 0;
margin:auto 0 ; //本元素相對於有relative的祖先元素上下垂直居中。
定位居中二：
父元素設置position:relative/fixed; 或者父元素是body。
子元素設置position:absolute; left:50%; top:50% margin-left:-(子元素寬度的一半); margin-top:-(子元素高度的一半);
固定寬度塊級元素:margin:0 auto; 左右居中。
塊級元素的內容:text-align: center; 左右居中。
行內元素:vertical-align:middle; 上下居中。
=================================
右下角的廣告定位：
position: fixed;
bottom:0;
right:10px;
是相對於瀏覽器窗口進行定位的，不會隨滾動條滾動而滾動。頁面的廣告就是最典型例子。
=======================================
position:sticky 是粘性
.two{
background: red;
position: sticky; //某個標簽設置了position:sticky; top:10px; 那么表示滾動條滾動時，頂部距離該標簽10px時，就粘着固定不變了，這里可以設置top,right.left,bottom
top: 10px;
}
如下圖：
這是剛剛刷新的頁面
這是滾動的頁面，紅色塊和瀏覽器頂部有10px;空隙，因為上面設置top:10px;
=========================================
=======================================
.container{
width: 1200px; //父元素的寬度可以是任意的，百分比也行。
height: 3000px;
background: green;
margin: 0 auto; //對於兩個塊級元素，想要子元素在父元素中水平居中，可以在子元素中設置margin:0 auto;
}
<body>
<div class="container"></div>
</body>
=======================
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
background: #4AC291;
font: 100% / 1.5 sans-serif;
display: flex;
height:100vh;
/* height: 100%; 這樣設置就變成了跟隨內容撐開的高度來設置。*/
/*不可以設置成：height:100%，無效。*/
}
main {
/**第一種，最優雅的一種**/
/*(絕大部分瀏覽器都支持)最優雅的一種：唯一的缺點是IE 11 不完全支持，存在一些bug
在父元素中寫兩行代碼：*/
/*
在父元素些一行代碼：
display: flex;
在需要垂直居中的對象寫一行代碼：
margin: auto;上下居中，左右居中，必須是塊級元素*/
margin: auto;
/**第二種，使用絕對定位，向下，向左移動50%，再向上向右設置margin:(負寬高的一半)**/
/*background: #655;*/
/*color: white;*/
/*!*使居中對象的內容居中*!*/
/*text-align: center;*/
/*line-height: 2em;*/
/*width: 12em;*/
/*position: absolute;*/
/*left: 50%;*/
/*top: 50%;*/
/*margin-left: -6em;*/
/*margin-top: -1em;*/
/*
這種需要知道對象的寬高
*/
/**第三種，和第二種同理，不同的是這里使用transform屬性**/
/*position: absolute;*/
/*top: 50%;*/
/*left: 50%;*/
/*transform: translate(-50%, -50%);*/
/*
相比上面一種方法比較寬松，不需要設置寬高，
transform屬性是不支持IE8以下
transform: translate(-50%, -50%);
把需要居中的對象，向X,Y軸都移動自身寬度，高度的一半
*/
/**第四種**/
/*width: 12em;*/
/*margin: 50vh auto 0;*/
/*transform: translateY(-50%);*/
/*
視口垂直居中推薦該方法
這種方法只針對視口進行垂直居中
1，必須設定寬度width
2，margin: 50vh auto 0;
解析：
上外邊距為：50%的視口寬度，即：把對象下移50%。左右自動對齊、
margin-top: 50vh;
margin-left:auto;
margin-right:auto
3，transform: translateY(-50%);
解析：把對象的Y軸向上移動50%；
*/
/**此外，另外一些居中方法**/
/*
1，父元素高度不確定，設置上下邊距，如：margin:20px,padding:20px。
2，父元素確定高度的，單行文本：line-height 等於 height
3，display:table-cell; vertical-align:middle;
*/
/**第一種，最優雅的一種**/
/*(絕大部分瀏覽器都支持)最優雅的一種：唯一的缺點是IE 11 不完全支持，存在一些bug
在父元素中寫兩行代碼：
display: flex;
height:100vh;
在需要垂直居中的對象寫一行代碼：
margin: auto;
一下是對第一種進行解釋：
請注意，當我們使用Flexbox時，margin: auto不僅在水平方向上將元素居中，垂直方向上也是如此。還有一點，我們甚至不需要指定任何寬度(當然，如果需要的話，也是可以指定的)：這個居中元素分配到的寬度等於 max-content。
如果瀏覽器不支持Flexbox，頁面渲染結果看起來就跟我們的起點圖是一樣的了(如果設置了寬度的話)。雖然沒有垂直居中效果，但也是完全可以接受的。
Flexbo 的另一個好處在於，它還可以將匿名容器(即沒有被標簽包裹的文本節點)垂直居中。
我們先給這個<main>元素指定一個固定的尺寸，然后借助Flexbox 規范所引入的align-items和justify-content屬性，我們可以讓它內部的文本也實現居中（我們可以對<body>使用相同的屬性來使<main>元素居中，但margin: auto方法要更加優雅一些，並且同時起到了回退的作用）。
main {
display: flex;
align-items: center;上下居中
justify-content: center; 左右居中
width: 100%;
height: 100%;
}
*/
}
</style>
</head>
<body>
<main class="test">
這是要居中的
</main>
</body>
</html>