1.margin:0 auto方式
这种对齐方式要求内部元素(.content_text)是块级元素，并且不能脱离文档流（如设置position:absolute）, 否则无效。
2.text-align:center方式
这种方式可以水平居中块级元素中的行内元素，如inline，inline-block；如果用来居中块级元素中的块级元素时，如div中的div，一旦内层的div有自己的宽度，这种方法就会失效。只能让里面div的文字的内容居中，而div仍然是左对齐的。
还有一种情况，当内部的元素脱离了文档流，display:absolute的情况下，不管是否是块级元素，都会居中，但是这种居中不是基于内部div的内容的，而是内部div最左端，内部div的最左端在div的中间（前提外部div设置了position:relative/absolute/fixed）；
3.脱离文档流的居中方式。
这种方式将脱离文档流的元素，设置top：50%，left：50%，然后使用transform来向左向上便宜半个内元素的宽和高。
.wrap {
position: relative;
height: 500px;
}
.box{
position:absolute;
width:150px;
height:150px;
background-color:blue;
top:50%; left:50%;
margin-top:-75px;
margin-left:-75px;
}脱离文档流的居中方式
.box{
position:absolute;
width:150px;
height:150px;
background-color:blue;
margin: auto;
left:0;
top:0;
right:0;
bottom:0;
cursor: p}
magin:atuo配合绝对定位实现水平和垂直方向居中
使用css3的translate水平垂直居中元素
.box{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 300px;
height: 600px;
}
使用css3计算的方式居中元素calc
.box{
position: absolute;
top: calc(50% - 50px);
left: calc(50% - 150px);
width: 300px;
height: 100px;
border: 1px solid #000;
}
4..垂直居中
行内元素的垂直居中把height和line-heigh的值设置成一样的即可。
5.相对定位的居中方式
.wrap{
position:relative;
width:400px;
height:350px;
background-color:red;
margin:100px auto;
}
.box{
position:relative;
width:150px;
height:150px;
background-color:blue;
left:50%;
margin-left:-75px;
top: 100px;
}
</style>
</head>
<body>
<div class="wrap">
<div class="box"></div>
</div>
</body>
</html>
margin:auto是具有强烈计算意味的关键字，用来计算元素对应方向应该获得的剩余空间大小
(1) 如果一侧定值，一侧auto，则auto为剩余空间大小
(2) 如果两侧均是auto，则平分剩余空间
211
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
