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;
vertical-align: middle;
}
</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>
=======================
单行居中：
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; 上下居中。
477
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
